Element System

The core of G6 charts is composed of three basic elements: Node, Edge, and Combo. These elements are the fundamental units for building complex graphical networks.

Node

Nodes represent entities or concepts in the graph, such as people, places, objects, etc. G6 provides a rich set of built-in node types:

G6 also supports defining nodes using React or custom nodes to meet specific needs.

Edge

Edges represent the connections between nodes, such as friendships, transactions, etc. G6 has multiple built-in edge types:

When built-in edges do not meet the requirements, complex connection expressions can be achieved through custom edges.

Combo

Combos are special elements that can contain nodes and other combos, used to represent collections, groups, or hierarchical relationships. G6 has two built-in combo types:

• Circle Combo(circle): Suitable for compact grouping
• Rectangle Combo(rect): Suitable for regular layout grouping

Combos support nesting, dragging, expanding/collapsing, and other interactions, and more complex container behaviors can be achieved through custom combos.

Element Composition Principle

Each element is composed of one or more basic shapes. Shapes are the smallest graphical units in G6, including rectangle, circle, text, path, etc.

For example:

• A node may consist of a background shape (such as a circle) and a text label
• An edge may consist of a path, arrow, and text label
• A combo may consist of a container shape, title text, and expand/collapse button

For more information about shapes, see Shape Overview and Shape Style Properties.

Element State

Element State is a powerful mechanism for displaying visual changes of elements in different interactions or business scenarios. G6 provides a complete state management system:

• Preset States: selected, highlight, active, etc.
• State Overlay: Elements can have multiple states simultaneously, with styles overlaying according to priority
• Custom States: Any state can be defined according to business needs

Configure Elements

G6 5.x adopts a flat configuration structure, where all element configurations are at the same level, making it easy to find and manage:

{
  node: {
    // Default node style
    style: {
      fill: 'orange',
      labelText: 'node',
    },
    // Node styles in different states
    state: {
      selected: {
        stroke: '#1890FF',
        lineWidth: 2,
      }
    }
  },
  edge: {
    // Default edge style
    style: {
      stroke: '#aaa',
    },
    // Edge styles in different states
    state: {
      highlight: {
        stroke: 'red',
      }
    }
  },
  combo: {
    // Default combo style
    style: {
      fill: 'lightblue',
      stroke: 'blue',
    }
  }
};

There are three configuration methods, in order of priority from high to low:

1. Dynamic configuration using instance methods: such as graph.setNode(), graph.setEdge(), graph.setCombo()
2. Global configuration when instantiating the graph: specify configuration items in new Graph()
3. Configuration in data: set in the data objects of nodes, edges, and combos

In editors like VSCode, you can see all configurable properties of elements and search based on keywords:

Extension Capabilities

G6 provides powerful extension capabilities to meet various customization needs:

• Custom Nodes: Custom Node Guide
• Custom Edges: Custom Edge Guide
• Custom Combos: Custom Combo Guide
• React Nodes: Define Nodes Using React
• 3D Extension: Use 3D nodes through @antv/g6-extension-3d

Built-in Element Reference

Node Types

• Built-in Node Library

Edge Types

• Built-in Edge Library

Combo Types

• Built-in Combo Library