Basic Introduction

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

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 node through data.

⚠️:You can click on the </> icon at the bottom right to expand the full source code view

02.Set Font Icons

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

03.Set Default Style

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

04.Set Up Animation

If we pursue a more delicate interactive experience, such as in hover, let halo another animation effect, as shown in the figure below

05.High-value Nodes

06.graphin-circle Style Interface Document

API

keyshape

NameDescriptionTypeDefault
size--number--
fill--string--
stroke--string--
lineWidth--number--
visible--booleantrue
opacity--number--
fillOpacity--number--
strokeOpacity--number--
shadowColor--string--
shadowBlur--number--
shadowOffsetX--number--
shadowOffsetY--number--
globalCompositeOperation--string--

label

NameDescriptionTypeDefault
valuelabel namestring--
position--string--
fill--string--
fontSize--number--
offset--number | number[]--
visible--booleantrue
stroke--string--
opacity--number--
fillOpacity--number--
strokeOpacity--number--
shadowColor--string--
shadowBlur--number--
shadowOffsetX--number--
shadowOffsetY--number--
globalCompositeOperation--string--

icon

NameDescriptionTypeDefault
type--"font" | "image" | "text"--
value--string--
size--number | number[]--
fill--string--
clip--{ [key: string]: any; r?: number; }--
fontFamily--string--
visible--booleantrue
stroke--string--
opacity--number--
fillOpacity--number--
strokeOpacity--number--
shadowColor--string--
shadowBlur--number--
shadowOffsetX--number--
shadowOffsetY--number--
globalCompositeOperation--string--

badges

NameDescriptionTypeDefault
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--booleantrue
opacity--number--
fillOpacity--number--
strokeOpacity--number--
shadowColor--string--
shadowBlur--number--
shadowOffsetX--number--
shadowOffsetY--number--
globalCompositeOperation--string--

halo

NameDescriptionTypeDefault
size--number | number[]--
fill--string--
stroke--string--
lineWidth--number--
opacity--number--
visible--booleanfalse
fillOpacity--number--
strokeOpacity--number--
shadowColor--string--
shadowBlur--number--
shadowOffsetX--number--
shadowOffsetY--number--
globalCompositeOperation--string--