Tutorial
| 配置项 | 类型 | 选项/ 示例 | 默认 | 说明 |
|---|---|---|---|---|
| fitView | Boolean | true / fasle | false | 是否将图适配到画布大小，可以防止超出画布或留白太多 |
| fitViewPadding | Number /Array | 20 [20, 40, 50, 20] | 0 | 画布上的四周留白宽度 |
| animate | Boolean | true / false | false | 是否启用图的动画。 |
| modes | Object | { default: [ 'drag-node', 'drag-canvas']} | null | 图上行为模式的集合。由于比较复杂，按需参见：G6 中的 Mode 教程 |
| defaultNode | Object | { type: 'circle', color: '#000', style: { ...... }} | null | 节点默认的属性，包括节点的一般属性和样式属性（style） |
| defaultEdge | Object | {type: 'polyline',color: '#000',style: {......}} | null | 边默认的属性，包括边的一般属性和样式属性（style） |
| nodeStateStyles | Object | {hover: {......},select: {......}} | null | 节点在除默认状态外，其他状态下的样式属性（style）。例如鼠标放置（hover）、选中（select）等状态。 |
| edgeStateStyles | Object | {hover: {......},select: {......}} | null | 边在除默认状态外，其他状态下的样式属性（style）。例如鼠标放置（hover）、选中（select）等状态。 |
图的元素
图的元素指的是 节点 Node 和 变 edg
G6 的内置节点包括 circle，rect，ellipse，diamond，triangle，star，image，modelRect，donut
内置节点说明
| 名称 | 描述 |
|---|---|
| circle | 圆形： - size 是单个数字，表示直径- 圆心位置对应节点的位置 - color 字段默认在描边上生效- 标签文本默认在节点中央 |
| rect | 矩形： - size 是数组，例如：[100, 50]- 矩形的中心位置是节点的位置，而不是左上角 - color 字段默认在描边上生效标签文本默认在节点中央 |
| ellipse | 椭圆： - size 是数组，表示椭圆的长轴直径和短轴直径 椭圆的圆心是节点的位置 - color 字段默认在描边上生效 -标签文本默认在节点中央 |
| diamond | 菱形： - size 是数组，表示菱形的宽和高 菱形的中心位置是节点的位置 - color 字段默认在描边上生效 -标签文本默认在节点中央 |
| triangle | 三角形： - size 是数组，表示三角形的底和高 -三角形的中心位置是节点的位置 - color 字段默认在描边上生效 -标签文本默认在节点下方 |
| star | 星形： - size 是单个数字，表示星形的大小- 星星的中心位置是节点的位置 - color 字段默认在描边上生效 -标签文本默认在节点中央 |
| image | 图片： -size 是数组，表示图片的宽和高 图片的中心位置是节点位置 -img 图片的路径，也可以在 style 里面设置 -color 字段不生效 -标签文本默认在节点下方 |
| modelRect | 卡片： - size 是数组，表示卡片的宽和高 卡片的中心位置是节点的位置 - color 字段默认在描边上生效 - 标签文本默认在节点中央 - 若有description 字段则显示在标签文本下方显示 description 内容 |
| donut | 圆形： - size 是单个数字，表示直径 - 圆心位置对应节点的位置 - color 字段默认在描边上生效 - 标签文本默认在节点中央 - 必须指定合法的 donutAttrs 字段 |
节点的通用属性
| 名称 | 是否必须 | 类型 | 备注 |
|---|---|---|---|
| id | true | String | 节点唯一 ID，必须是唯一的 string |
| x | false | Number | x 坐标 |
| y | false | Number | y 坐标 |
| type | false | String | 指定节点类型，内置节点类型名称或自定义节点的名称。默认为 'circle' |
| size | false | Number / Array | 节点的大小 |
| anchorPoints | false | Array | 指定边连入节点的连接点的位置（相对于该节点而言），可以为空。例如: [0, 0]，代表节点左上角的锚点，[1, 1],代表节点右下角的锚点 |
| style | false | Object | 节点的样式属性。 |
| label | false | String | 文本文字 |
| labelCfg | false | Object | 文本配置项 |
样式属性 style :Object 类型。通过 style 配置来修改节点的填充色、边框颜色、阴影等属性。下表是 style 对象中常用的配置项：
| 名称 | 是否必须 | 类型 | 备注 |
|---|---|---|---|
| fill | false | String | 节点填充色 |
| stroke | false | String | 节点的描边颜色 |
| lineWidth | false | Number | 描边宽度 |
| lineDash | false | Number[] | 描边虚线，数组代表实、虚长度 |
| shadowColor | false | String | 阴影颜色 |
| shadowBlur | false | Number | 阴影范围 |
| shadowOffsetX | false | Number | 阴影 x 方向偏移量 |
| shadowOffsetY | false | Number | 阴影 y 方向偏移量 |
| opacity | false | Number | 设置绘图的当前 alpha 或透明值 |
| fillOpacity | false | Number | 设置填充的 alpha 或透明值 |
| cursor | false | String | 鼠标在该节点上时的鼠标样式，CSS 的 cursor 选项都支持 |
styel 示例
const graph = new G6.Graph({
container: 'mountNode',
width: 800,
height: 600,
defaultNode: {
// ... 其他属性
style: {
fill: '#steelblue',
stroke: '#eaff8f',
lineWidth: 5,
// ... 其他属性
},
},
});标签文本 label 及其配置 labelCfg
label String 类型。标签文本的文字内容。
labelCfg Object 类型。配置标签文本。下面是 labelCfg 对象中的常用配置项：
| 名称 | 是否必须 | 类型 | 备注 |
|---|---|---|---|
| position | false | String | 文本相对于节点的位置，目前支持的位置有：'center'，'top'，'left'，'right'，'bottom'。默认为 'center'。modelRect 节点不支持该属性 |
| offset | false | Number | 文本的偏移，position 为 'bottom' 时，文本的上方偏移量；position 为 'left' 时，文本的右方偏移量；以此类推在其他 position 时的情况。modelRect 节点的 offset 为左边距 |
| style | false | Object | 标签的样式属性。 |
接上表格的 style
上表中的标签的样式属性 style 的常用配置项如下：
| 名称 | 是否必须 | 类型 | 备注 |
|---|---|---|---|
| fill | false | String | 文本颜色 |
| stroke | false | String | 文本描边颜色 |
| lineWidth | false | Number | 文本描边粗细 |
| opacity | false | Number | 文本透明度 |
| fontFamily | false | String | 文本字体 |
| fontSize | false | Number | 文本字体大小 |
