logoCreated with Sketch.

G6

Built-in Nodes

9 min read

The built-in nodes in G6 include circle, rect, ellipse, diamond, triangle, star, image, and modelRect.

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
 

Common Property

Name Required Type Remark
id true String The id of the node
x false Number x coordinate
y false Number y coordinate
shape false String The shape of the 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
shadowColor false String The shadow color
shadowBlur false Number The blur of the shadow
shadowOffsetX false Number The x offset of the shadow
shadowOffsetX 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

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 / Array The offset of the label on the directions of 'top', 'left', 'right', 'bottom'
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
font false String The font of the label
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, 10, 10, 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.

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: {
    shape: '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,
      shape: 'rect',
      // ...    // Other properties for this node
      style: {
        // ...  // Style properties for this node
      },
    },
    {
      id: 'node1',
      size: [50, 100],
      shape: 'ellipse',
      // ...    // Other properties for this node
      style: {
        // ...  // Style properties for this node
      },
    },
    // ... // 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 rewrite 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,
    shape: 'rect',
    style: {
      fill: 'blue',
    },
  };
});

graph.data(data);
graph.render();

Example

const data = {
  nodes: [
    {
      x: 100,
      y: 100,
      shape: 'circle',
      label: 'circle',
    },
    {
      x: 200,
      y: 100,
      shape: 'rect',
      label: 'rect',
    },
    {
      id: 'node-ellipse',
      x: 330,
      y: 100,
      shape: 'ellipse',
      label: 'ellipse',
    },
    {
      id: 'node-diamond',
      x: 460,
      y: 100,
      shape: 'diamond',
      label: 'diamond',
    },
    {
      id: 'node-triangle',
      x: 560,
      y: 100,
      //size: 80,
      shape: 'triangle',
      label: 'triangle',
    },
    {
      id: 'node-star',
      x: 660,
      y: 100,
      //size: [60, 30],
      shape: 'star',
      label: 'star',
    },
    {
      x: 760,
      y: 100,
      size: 50,
      shape: 'image',
      img:
        'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',
      label: 'image',
    },
    {
      id: 'node-modelRect',
      x: 900,
      y: 100,
      shape: '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,
  shape: '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',
  shape: 'modelRect',
  label: 'modelRect'
}
  • State —— Change the styles during the interaction process.