Basic Introduction
Graphin official website has built-in edge type graphin-line. As the default edge type, you do not need to explicitly specify type:"graphin-line" in the data. Graphin standardizes the composition of edges. graphin-line is composed of 3 parts of graphs, namely keyshape, label, and halo
01.Styles Are Data-driven
The style information of the node is all stored in the style field, and we can drive the style setting of the edge by data.
⚠️：You can click on the </> icon at the bottom right to expand the full source code view
Graphin has built-in Utils.processEdges method, which specializes in dealing with multilateral situations, whether it is an edge in the same direction or an opposite direction, or a self-circular edge, it can be quickly processed by this tool function
API: Graphin.Utils.processEdges(params1,params2)
| Function parameters | Description | Types | Defaults |
|---|
| params1 | Collection of edges | GraphinData['edges'] | - |
| params2 | Multilateral configuration item | {poly:number,loop:number} | {poly:50,loop:10} |
03.graphin-line Style Interface Document
API
keyshape
| Name | Description | Type | Default |
|---|
| type | -- | string | -- |
| lineWidth | -- | number | -- |
| stroke | -- | string | -- |
| opacity | -- | number | -- |
| lineDash | -- | number[] | -- |
| lineAppendWidth | -- | number | -- |
| cursor | -- | string | -- |
| endArrow | -- | { [key: string]: any; path?: string; fill?: string; stroke?: string; } | -- |
| poly | -- | { distance?: number; } | -- |
| loop | -- | { distance?: number; dx?: number; } | -- |
| fill | -- | string | -- |
| fillOpacity | -- | number | -- |
| strokeOpacity | -- | number | -- |
| shadowColor | -- | string | -- |
| shadowBlur | -- | number | -- |
| shadowOffsetX | -- | number | -- |
| shadowOffsetY | -- | number | -- |
| globalCompositeOperation | -- | string | -- |
label
| Name | Description | Type | Default |
|---|
| 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 | -- | number | -- |
| fillOpacity | -- | number | -- |
| strokeOpacity | -- | number | -- |
| shadowColor | -- | string | -- |
| shadowBlur | -- | number | -- |
| shadowOffsetX | -- | number | -- |
| shadowOffsetY | -- | number | -- |
| globalCompositeOperation | -- | string | -- |
halo
| Name | Description | Type | Default |
|---|
| type | -- | string | -- |
| lineWidth | -- | number | -- |
| stroke | -- | string | -- |
| opacity | -- | number | -- |
| lineDash | -- | number[] | -- |
| lineAppendWidth | -- | number | -- |
| cursor | -- | string | -- |
| visible | -- | boolean | false |
| fill | -- | string | -- |
| fillOpacity | -- | number | -- |
| strokeOpacity | -- | number | -- |
| shadowColor | -- | string | -- |
| shadowBlur | -- | number | -- |
| shadowOffsetX | -- | number | -- |
| shadowOffsetY | -- | number | -- |
| globalCompositeOperation | -- | string | -- |
animate
| Name | Description | Type | Default |
|---|
| type | -- | "line-dash" | "line-growth" | "circle-running" | -- |
| color | -- | string | -- |
| repeat | -- | boolean | true |
| duration | -- | number | 3000 |
| visible | -- | boolean | false |
| fill | -- | string | -- |
| stroke | -- | string | -- |
| opacity | -- | number | -- |
| fillOpacity | -- | number | -- |
| strokeOpacity | -- | number | -- |
| shadowColor | -- | string | -- |
| shadowBlur | -- | number | -- |
| shadowOffsetX | -- | number | -- |
| shadowOffsetY | -- | number | -- |
| globalCompositeOperation | -- | string | -- |