基本介绍
Graphin 官网内置了 边类型graphin-line.作为默认的边类型，你不需要在数据中显式指定type:"graphin-line"。Graphin 对边的组成进行了规范化处理，graphin-line 由 3 部分图形组成，分别是keyshape,label,halo
01.样式通过数据驱动
节点的样式信息全部存储在 style 字段中，我们可以通过数据驱动 边的样式设置。
⚠️：可以点击右下方</>图标，展开完整源码查看
02.使用工具快速处理多边
Graphin 内置了 Utils.processEdges 方法，专门处理多边的情况，无论是同方向还是反方向边，亦或是自环边，通过该工具函数都能快速处理
API: Graphin.Utils.processEdges(params1,params2)
| 函数参数 | 说明 | 类型 | 默认值 |
|---|
| params1 | 边的集合 | GraphinData['edges'] | - |
| params2 | 多边配置项 | {poly:number,loop:number} | {poly:50,loop:10} |
03.graphin-line 样式接口文档
API
keyshape
| 属性名 | 描述 | 类型 | 默认值 |
|---|
| type | 边的类型：目前是line 直线，未来可以扩展 | string | -- |
| lineWidth | 边宽 | number | -- |
| stroke | 描边色、渐变或 纹理，默认值为空； | string | -- |
| opacity | 透明度，默认值为 1； | number | -- |
| lineDash | 虚线Dash | number[] | -- |
| lineAppendWidth | 边的交互区域扩展 | number | -- |
| cursor | 鼠标样式 | string | -- |
| endArrow | 末尾箭头 | { [key: string]: any; path?: string; fill?: string; stroke?: string; } | -- |
| poly | 多边的设置，仅当keyshape.type 为poly时有效 | { distance?: number; } | -- |
| loop | 自环边的设置 | { distance?: number; dx?: number; } | -- |
| fill | 填充色、渐变或 纹理，默认值为空； | string | -- |
| fillOpacity | 填充色的不透明度，默认值为 1； | number | -- |
| strokeOpacity | 描边色的不透明度，默认值为 1； | number | -- |
| shadowColor | 阴影的颜色； | string | -- |
| shadowBlur | 阴影的模糊级别； | number | -- |
| shadowOffsetX | 阴影距形状的水平距离； | number | -- |
| shadowOffsetY | 阴影距形状的垂直距离； | number | -- |
| globalCompositeOperation | 新图像如何绘制到已有的图像上 | string | -- |
label
| 属性名 | 描述 | 类型 | 默认值 |
|---|
| value | 值 | string | number | -- |
| fill | 填充色、渐变或 纹理，默认值为空； | string | -- |
| fontSize | 字体大小 | number | -- |
| offset | 偏移位置 | number[] | [0,0] |
| background | 字体的背景色 | { width?: number; height?: number; stroke?: string; fill?: string; radius?: number; opacity?: number; } | -- |
| stroke | 描边色、渐变或 纹理，默认值为空； | string | -- |
| opacity | 透明度，默认值为 1； | number | -- |
| fillOpacity | 填充色的不透明度，默认值为 1； | number | -- |
| strokeOpacity | 描边色的不透明度，默认值为 1； | number | -- |
| shadowColor | 阴影的颜色； | string | -- |
| shadowBlur | 阴影的模糊级别； | number | -- |
| shadowOffsetX | 阴影距形状的水平距离； | number | -- |
| shadowOffsetY | 阴影距形状的垂直距离； | number | -- |
| globalCompositeOperation | 新图像如何绘制到已有的图像上 | string | -- |
halo
| 属性名 | 描述 | 类型 | 默认值 |
|---|
| type | -- | string | -- |
| lineWidth | -- | number | -- |
| stroke | 描边色、渐变或 纹理，默认值为空； | string | -- |
| opacity | 透明度，默认值为 1； | number | -- |
| lineDash | -- | number[] | -- |
| lineAppendWidth | -- | number | -- |
| cursor | -- | string | -- |
| visible | 是否展示 | boolean | false |
| fill | 填充色、渐变或 纹理，默认值为空； | string | -- |
| fillOpacity | 填充色的不透明度，默认值为 1； | number | -- |
| strokeOpacity | 描边色的不透明度，默认值为 1； | number | -- |
| shadowColor | 阴影的颜色； | string | -- |
| shadowBlur | 阴影的模糊级别； | number | -- |
| shadowOffsetX | 阴影距形状的水平距离； | number | -- |
| shadowOffsetY | 阴影距形状的垂直距离； | number | -- |
| globalCompositeOperation | 新图像如何绘制到已有的图像上 | string | -- |
animate
| 属性名 | 描述 | 类型 | 默认值 |
|---|
| type | 动画类型 | "line-dash" | "line-growth" | "circle-running" | -- |
| color | 当类型为'circle-running'时候小圆球的颜色 | string | -- |
| repeat | 动画是否重复 | boolean | true |
| duration | 动画时长 | number | 3000 |
| visible | 是否展示 | boolean | false |
| fill | 填充色、渐变或 纹理，默认值为空； | string | -- |
| stroke | 描边色、渐变或 纹理，默认值为空； | string | -- |
| opacity | 透明度，默认值为 1； | number | -- |
| fillOpacity | 填充色的不透明度，默认值为 1； | number | -- |
| strokeOpacity | 描边色的不透明度，默认值为 1； | number | -- |
| shadowColor | 阴影的颜色； | string | -- |
| shadowBlur | 阴影的模糊级别； | number | -- |
| shadowOffsetX | 阴影距形状的水平距离； | number | -- |
| shadowOffsetY | 阴影距形状的垂直距离； | number | -- |
| globalCompositeOperation | 新图像如何绘制到已有的图像上 | string | -- |