基本介绍

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虚线Dashnumber[]--
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

属性名描述类型默认值
valuestring | 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是否展示booleanfalse
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动画是否重复booleantrue
duration动画时长number3000
visible是否展示booleanfalse
fill填充色、渐变或 纹理,默认值为空;string--
stroke描边色、渐变或 纹理,默认值为空;string--
opacity透明度,默认值为 1;number--
fillOpacity填充色的不透明度,默认值为 1;number--
strokeOpacity描边色的不透明度,默认值为 1;number--
shadowColor阴影的颜色;string--
shadowBlur阴影的模糊级别;number--
shadowOffsetX阴影距形状的水平距离;number--
shadowOffsetY阴影距形状的垂直距离;number--
globalCompositeOperation新图像如何绘制到已有的图像上string--