{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-58860a1e70f5b5ef7ce51e505e074d52-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

Diamond

\n

G6 内置了菱形 diamond 节点，其默认样式如下。标签文本位于菱形中央。
\"image.png\"

\n

使用方法

\n

如 内置节点 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。

\n

1 实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultNode 指定 shape 为 'diamond'，即可使用 diamond 节点。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    shape: 'diamond',\n    // 其他配置\n  },\n});\n
\n

2 在数据中动态配置

\n

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [{\n\t  id: 'node0',\n    shape: 'diamond',\n    ... // 其他配置\n    },\n    ... // 其他节点\n  ],\n  edges: [\n    ... // 边\n  ]\n}
\n

配置项说明

\n

circle 节点支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
size菱形的宽高NumberArray
stylediamond默认样式ObjectCanvas支持的属性
labelCfg文件配置项Object
stateStyles各状态下的样式Object只对keyShape起作用
linkPoints菱形上的链接点Object默认不显示
icon菱形上icon配置Object默认不显示icon
\n

样式属性 style

\n

Object 类型。通过 style 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 style，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  nodes: [\n    {\n      x: 100,\n      y: 100,\n      shape: 'diamond',\n      label: 'diamond',\n    },\n  ],\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    // shape: 'diamond', // 数据中已指定 shape，这里无需再次指定\n    size: [200, 80],\n    style: {\n      fill: '#bae637',\n      stroke: '#eaff8f',\n      lineWidth: 5,\n    },\n  },\n});\ngraph.data(data);\ngraph.render();\n
\n

标签文本配置 labelCfg

\n

Object 类型。通过 labelCfg 配置标签文本。基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    labelCfg: {\n      style: {\n        fill: '#9254de',\n        fontSize: 18,\n      },\n      position: 'bottom',\n    },\n  },\n});\n// ...\n
\n

边的连入点 linkPoints

\n

Object 类型。通过配置 linkPoints ，可以指定菱形周围「上、下、左、右」四个方向上边的连入点。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
top是否显示上部的连接点Boolean默认为false
bottom是否显示底部的连接点Boolean默认为false
left是否显示左侧的连接点Boolean默认为false
right是否显示右侧的连接点Boolean默认为false
size连接点的大小Number默认为3
fill连接点的填充色String默认为#72CC4A
stroke连接点的边框颜色String默认为#72CC4A
lineWidth连接点边框的宽度Number默认为1
\n

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 linkPoints 配置项进行连入点的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    linkPoints: {\n      top: true,\n      bottom: true,\n      left: true,\n      right: true,\n      size: 5,\n      fill: '#fff',\n    },\n  },\n});\n// ...\n
\n

图标 icon

\n

Object 类型。通过配置 icon，可以在圆上显示小图标。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
show是否显示iconBoolean默认为false，不显示
widthicon的宽度Number默认为16
heighticon的高度Number默认为16
imgicon的地址String
\n

下面代码演示在实例化图时全局配置方法中配置 icon。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    icon: {\n      show: true,\n      width: 25,\n      height: 25,\n    },\n  },\n});\n// ...\n
"}