What is a Node

A node is one of the basic elements in a graph, representing an entity or an abstract concept, such as a person, a place, an organization, etc. Nodes can contain attributes like ID, name, type, etc. In G6, nodes can have various shapes and styles, and support rich interactions and customization.

You can create any number of nodes in a graph and connect them with edges to represent relationships.

Node System

The G6 node system includes three main categories: built-in nodes, extended nodes, and custom nodes. In most cases, built-in nodes are sufficient.

Built-in Nodes

G6 provides a variety of built-in node types, which can be used directly without registration:

3D Nodes

@antv/g6-extension-3d provides 3D nodes:

• Capsule - Capsule-shaped node
• Cone - Cone-shaped node
• Cube - Cube-shaped node
• Cylinder - Cylinder-shaped node
• Plane - Plane node
• Sphere - Sphere node
• Torus - Torus node

React Nodes

@antv/g6-extension-react provides React nodes, supporting the use of React components as the node body. For detailed tutorials, please refer to the Using React to Define Nodes document.

Custom Nodes

When built-in and extended nodes cannot meet the requirements, G6 offers powerful customization capabilities:

• Extend built-in nodes
• Create entirely new node types

Unlike built-in nodes, custom nodes need to be registered before use. For detailed tutorials, please refer to the Custom Nodes document.

Data Structure

When defining nodes, you need to add a nodes field to the graph's data object. Each node is an object with the following structure:

An example of a data item in the nodes array:

{
  "id": "node-1",
  "type": "circle",
  "data": { "name": "alice", "role": "Admin" },
  "style": { "x": 100, "y": 200, "size": 32, "fill": "violet" },
  "states": ["selected"],
  "combo": null
}

Configuration Methods

There are three ways to configure nodes, listed in order of priority from high to low:

• Use graph.setNode() for dynamic configuration
• Global configuration during graph instantiation
• Dynamic properties in data

These configuration methods can be used simultaneously. When there are identical configuration items, the method with higher priority will override the one with lower priority.

Using graph.setNode()

After creating the graph instance, you can use graph.setNode() to dynamically set the node's style mapping logic.

This method must be called before graph.render() to take effect and has the highest priority.

graph.setNode({
  style: {
    type: 'circle',
    style: { size: 60, fill: '#7FFFD4', stroke: '#5CACEE', lineWidth: 2 },
  },
});

graph.render();

Global Configuration During Graph Instantiation

When instantiating the graph, you can configure node style mapping through node, which is a global configuration and will apply to all nodes.

import { Graph } from '@antv/g6';

const graph = new Graph({
  node: {
    type: 'circle',
    style: { size: 60, fill: '#7FFFD4', stroke: '#5CACEE', lineWidth: 2 },
  },
});

Dynamic Configuration in Data

If you need different configurations for different nodes, you can write the configuration into the node data. This configuration method can be directly written into the data in the following form:

const data = {
  nodes: [
    {
      id: 'node-1',
      type: 'circle',
      style: { size: 60, fill: '#7FFFD4', stroke: '#5CACEE', lineWidth: 2 },
    },
  ],
};

Adjusting Priority

If you want the configuration in the data to have a higher priority than the global configuration, you can do so as follows:

const data = {
  nodes: [
    {
      id: 'node-1',
      type: 'circle',
      style: { size: 60, fill: '#7FFFD4', stroke: '#5CACEE', lineWidth: 2 },
    },
  ],
};

const graph = new Graph({
  node: {
    type: 'circle',
    style: {
      stroke: (d) => d.style.stroke || '#5CACEE',
      lineWidth: 2,
    },
  },
});

Dynamically Updating Nodes

G6 supports dynamically updating the style and state of nodes at runtime:

// Update the style of a single node
graph.updateNodeData([
  {
    id: 'node-1',
    style: {
      fill: 'red',
      size: 80,
    },
  },
]);
graph.draw();

// Set node state
graph.setElementState('node-1', ['selected']);

For more node-related APIs, please refer to API - Element Operations.

Node States

Nodes can have different states, such as selected, highlighted, disabled, etc. You can define the display effect of nodes in different states by configuring state styles:

const graph = new Graph({
  node: {
    style: {
      // Default style
      fill: '#C6E5FF',
    },
    // State styles
    state: {
      selected: {
        fill: '#ffa940',
        stroke: '#ff7a00',
        haloStroke: '#ff7a00',
      },
      highlight: {
        stroke: '#1890ff',
        lineWidth: 3,
      },
    },
  },
});

The state system is the foundation for implementing node interaction effects. For more information on states, please refer to Element States.