Overview of Nodes
The built-in nodes in G6 include circle, rect, ellipse, diamond, triangle, star, image, modelRect, and donut(supported after v4.2.5).
In this document, we will briefly introduce the built-in nodes in G6, the common property, and the way to configure the node type. To know more about each type of built-in nodes in G6, please refer to the corresponding documents in this directory.
Types of Default Nodes
The table below shows the built-in nodes and their special properties:
| Name | Description | Default |
|---|---|---|
| circle | Circle node: - size is a number representing the diameter- The circle is centered at the node position - color takes effect on the stroke- The label is placed on the center of the circle by default - More properties are described in circle |  |
| rect | Rect node: - size is an array, e.g. [100, 50]- The rect in centered at the node position - color takes effect on the stroke- The label is placed on the center of the circle by default - More properties are described in rect |  |
| ellipse | Ellipse node: - size is an array, representing the lengths of major diameter and minor diameter- The ellipse is centered at the node position - color takes effect on the stroke- The label is placed on the center of the circle by default - More properties are described in ellipse |  |
| diamond | Diamond node: - size is an array, representing the width and height of the diamond- The diamond is centered on the node position - color takes effect on the stroke- The label is placed on the center of the circle by default - More properties are described in diamond |  |
| triangle | Triangle node: - size is an array, representing the length of the base and the height of the triangle- The triangle is centered on the node position - color takes effect on the stroke- he label lays on the bottom of the node by default - More properties are described in triangle |  |
| star | Star node: - size is a number, representing the size of the star- The star is centered on the node position - color takes effect on the stroke- The label is placed on the center of the circle by default - More properties are described in star |  |
| image | Image node: - size is an array, representing the width and the height of the image- The image is centered on the node position - img The url of the image. It can be assigned in style as well- color does not take effect- The label lays on the bottom of the node by default - More properties are described in image |  |
| modelRect | Card node: - size is an array, representing the width and the height of the card- The modelRect is centered on the node position - color takes effect on the stroke- The label is placed on the center of the circle by default - If description exists, it will lay below the label- More properties are described in modelRect |   |
| donut | Circle node: - size is a number representing the diameter- The circle is centered at the node position - color takes effect on the stroke- The label is placed on the center of the circle by default - Valid property donutAttrs should be assigned- More properties are in Donut |  |
Common Property
| Name | Required | Type | Remark |
|---|---|---|---|
| id | true | String | The ID of the node, MUST be a unique string |
| x | false | Number | x coordinate |
| y | false | Number | y coordinate |
| type | false | String | The shape type of the node. It can be the type of built-in Node, or the custom Node. 'circle' by default |
| size | false | Number / Array | The size of the node |
| anchorPoints | false | Array | The interactions of the node and related edges. It can be null. [0, 0] represents the anchor on the left top; [1, 1]represents the anchor ont he right bottom |
| style | false | Object | The node style |
| label | false | String | The label text of the node |
| labelCfg | false | Object | The configurations of the label |
style
style is an object to configure the filling color, stroke color, shadow, and so on. Here is the commonly used properties in style:
| Name | Required | Type | Remark |
|---|---|---|---|
| fill | false | String | The filling color |
| stroke | false | String | The stroke color |
| lineWidth | false | Number | The line width of the stroke |
| lineDash | false | Number[] | The lineDash of the stroke |
| shadowColor | false | String | The shadow color |
| shadowBlur | false | Number | The blur of the shadow |
| shadowOffsetX | false | Number | The x offset of the shadow |
| shadowOffsetY | false | Number | The y offset of the shadow |
| opacity | false | Number | The alpha or transparency of the node |
| fillOpacity | false | Number | The filling alpha or transparency of the node |
| cursor | false | String | The type of the mouse when hovering the node. The options are the same as cursor in CSS |
Configure style globally when instantiating the Graph:
const graph = new G6.Graph({
container: 'mountNode',
width: 800,
height: 600,
defaultNode: {
// ... Other properties for nodes
style: {
fill: '#steelblue',
stroke: '#eaff8f',
lineWidth: 5,
// ... Other style properties
},
},
});label and labelCfg
label is a string which indicates the content of the label. labelCfg is an object to configure the label. The commonly used configurations of labelCfg:
| Name | Required | Type | Remark |
|---|---|---|---|
| position | false | String | The relative positions to the node. Options: 'center', 'top', 'left', 'right', 'bottom'. 'center' by default |
| offset | false | Number | The offset value of the label. When the position is 'bottom', the value is the top offset of the node; When the position is 'left', the value is the right offset of the node; it is similar with other position. |
| style | false | Object | The style property of the label |
The commonly used configurations for the style in the above table are:
| Name | Required | Type | Remark |
|---|---|---|---|
| fill | false | String | The color of the label |
| stroke | false | String | The stroke color of the label |
| lineWidth | false | Number | The line width of the label |
| opacity | false | Number | The opacity of the label |
| fontFamily | false | String | The font family |
| fontSize | false | Number | The font size of the label |
| ... The label styles of node and edge are the same, summarized in Text Shape API |
The following code shows how to configure label and labelCfg globally when instantiating a Graph:
const graph = new G6.Graph({
container: 'mountNode',
width: 800,
height: 600,
defaultNode: {
// ... Other properties for nodes
label: 'node-label',
labelCfg: {
position: 'bottom',
offset: 10,
style: {
fill: '#666',
},
},
},
});Configure Nodes
There are three methods to configure nodes: Configure nodes globally when instantiating a Graph; Configure nodes in their data; Configure nodes by graph.node(nodeFn). Their priorities are:
graph.node(nodeFn) > Configure in data > Configure globally
That means, if there are same configurations in different ways, the way with higher priority will take effect.
⚠️ Attention: Expect for
id, and label which should be assigned to every single node data, the other configurations in The Common Property and in each node type (refer to doc of each node type) support to be assigned by the three ways.Configure Globally When Instantiating Graph
Assign defaultNode to configure all the nodes globally:
const graph = new G6.Graph({
container: 'mountNode',
width: 800,
height: 600,
defaultNode: {
type: 'circle',
// Other properties for all the nodes
},
});Configure in Data
To configure different nodes with different properties, you can write the properties into their data individually:
const data = {
nodes: [
{
id: 'node0',
size: 100,
type: 'rect',
// ... // Other properties for this node
style: {
// ... // Style properties for this node. Different styles for different types of nodes can be refered to the subdocuments
},
},
{
id: 'node1',
size: [50, 100],
type: 'ellipse',
// ... // Other properties for this node
style: {
// ... // Style properties for this node. Different styles for different types of nodes can be refered to the subdocuments
},
},
// ... // Other nodes
],
edges: [
// ... // edges
],
};Configure with graph.node(nodeFn)
By this way, we can configure different nodes with different properties.
⚠️Attention:
graph.node(nodeFn)must be called before calling render(). It does not take effect otherwise;- It has the highest priority that will override the same properties configured by other ways;
- Each node will be updated when adding or updating items. It will cost a lot when the amount of the data is large.
// const data = ...
// const graph = ...
graph.node((node) => {
return {
id: node.id,
type: 'rect',
style: {
fill: 'blue',
},
};
});
graph.data(data);
graph.render();Example
const data = {
nodes: [
{
x: 100,
y: 100,
type: 'circle',
label: 'circle',
},
{
x: 200,
y: 100,
type: 'rect',
label: 'rect',
},
{
id: 'node-ellipse',
x: 330,
y: 100,
type: 'ellipse',
label: 'ellipse',
},
{
id: 'node-diamond',
x: 460,
y: 100,
type: 'diamond',
label: 'diamond',
},
{
id: 'node-triangle',
x: 560,
y: 100,
//size: 80,
type: 'triangle',
label: 'triangle',
},
{
id: 'node-star',
x: 660,
y: 100,
//size: [60, 30],
type: 'star',
label: 'star',
},
{
x: 760,
y: 100,
size: 50,
type: 'image',
img: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',
label: 'image',
},
{
id: 'node-modelRect',
x: 900,
y: 100,
type: 'modelRect',
label: 'modelRect',
},
],
};
const graph = new G6.Graph({
container: 'mountNode',
width: 1500,
height: 300,
});
graph.data(data);
graph.render();The result:
- The label of the triangle and image node are layed on the bottom, and the others are layed on the center by default.
Adjust the Properties
By writing the properties into the data, we adjust the label position, color, and styles of the node with 'node-ellipse' as its id. Replace the following code to the code about 'node-ellipse''s data to obtain the result.
{
id: 'node-ellipse',
x: 330,
y: 100,
type: 'ellipse',
size: [60, 30],
label: 'ellipse',
labelCfg: {
position: 'bottom',
offset: 5
},
style: {
fill: '#fa8c16',
stroke: '#000',
lineWidth: 2
}
}
Then, we add some description for the node with 'node-modelRect' as its id:
{
id: 'node-modelRect',
x: 900,
y: 100,
description: '描述文本xxxxxxxxxxx',
type: 'modelRect',
label: 'modelRect'
}
Related Reading
- State —— Change the styles during the interaction process.