Graphin has the only built-in node type graphin-circle. As the default node type, you do not need to explicitly specify type:"graphin-circle" in the data. Graphin standardizes the composition of nodes, graphin-circle is composed of 5 parts of graphs, namely keyshape, label, icon, badges,halo
The style information of the node is all stored in the style field, and we can drive the style setting of the node through data.
⚠️：You can click on the
</>icon at the bottom right to expand the full source code view
There are three types of icons mentioned above. Starting from the actual business, setting the icon as a font icon is the most common practice. This not only reduces network load requests, but is also very convenient and efficient. Graphin uses Graphin.registerFontFamily to register and load font files, let's take a look
The font icon of the above setting node, in addition to covering the style in the style of each data, graphin also maintains the mechanism of G6, you can set the default node style through defaultNode
If we pursue a more delicate interactive experience, such as in hover, let halo another animation effect, as shown in the figure below
graphin-circle Style Interface Document| Name | Description | Type | Default |
|---|---|---|---|
| size | -- | number | -- |
| fill | -- | string | -- |
| stroke | -- | string | -- |
| lineWidth | -- | number | -- |
| visible | -- | boolean | true |
| opacity | -- | number | -- |
| fillOpacity | -- | number | -- |
| strokeOpacity | -- | number | -- |
| shadowColor | -- | string | -- |
| shadowBlur | -- | number | -- |
| shadowOffsetX | -- | number | -- |
| shadowOffsetY | -- | number | -- |
| globalCompositeOperation | -- | string | -- |
| Name | Description | Type | Default |
|---|---|---|---|
| value | label name | string | -- |
| position | -- | string | -- |
| fill | -- | string | -- |
| fontSize | -- | number | -- |
| offset | -- | number | number[] | -- |
| visible | -- | boolean | true |
| stroke | -- | string | -- |
| opacity | -- | number | -- |
| fillOpacity | -- | number | -- |
| strokeOpacity | -- | number | -- |
| shadowColor | -- | string | -- |
| shadowBlur | -- | number | -- |
| shadowOffsetX | -- | number | -- |
| shadowOffsetY | -- | number | -- |
| globalCompositeOperation | -- | string | -- |
| Name | Description | Type | Default |
|---|---|---|---|
| type | -- | "font" | "image" | "text" | -- |
| value | -- | string | -- |
| size | -- | number | number[] | -- |
| fill | -- | string | -- |
| clip | -- | { [key: string]: any; r?: number; } | -- |
| fontFamily | -- | string | -- |
| visible | -- | boolean | true |
| stroke | -- | string | -- |
| opacity | -- | number | -- |
| fillOpacity | -- | number | -- |
| strokeOpacity | -- | number | -- |
| shadowColor | -- | string | -- |
| shadowBlur | -- | number | -- |
| shadowOffsetX | -- | number | -- |
| shadowOffsetY | -- | number | -- |
| globalCompositeOperation | -- | string | -- |
| Name | Description | Type | Default |
|---|---|---|---|
| position | -- | string | -- |
| type | -- | string | -- |
| value | -- | string | number | -- |
| size | -- | number | number[] | -- |
| fill | -- | string | -- |
| stroke | -- | string | -- |
| color | -- | string | -- |
| fontSize | -- | number | -- |
| fontFamily | -- | string | -- |
| padding | -- | number | -- |
| offset | -- | number | number[] | -- |
| visible | -- | boolean | true |
| opacity | -- | number | -- |
| fillOpacity | -- | number | -- |
| strokeOpacity | -- | number | -- |
| shadowColor | -- | string | -- |
| shadowBlur | -- | number | -- |
| shadowOffsetX | -- | number | -- |
| shadowOffsetY | -- | number | -- |
| globalCompositeOperation | -- | string | -- |
| Name | Description | Type | Default |
|---|---|---|---|
| size | -- | number | number[] | -- |
| fill | -- | string | -- |
| stroke | -- | string | -- |
| lineWidth | -- | number | -- |
| opacity | -- | number | -- |
| visible | -- | boolean | false |
| fillOpacity | -- | number | -- |
| strokeOpacity | -- | number | -- |
| shadowColor | -- | string | -- |
| shadowBlur | -- | number | -- |
| shadowOffsetX | -- | number | -- |
| shadowOffsetY | -- | number | -- |
| globalCompositeOperation | -- | string | -- |