This document introduces the common attribute configurations for built-in nodes.

NodeOptions

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

const graph = new Graph({
  node: {
    type: 'circle', // Node type
    style: {}, // Node style
    state: {}, // State style
    palette: {}, // Palette configuration
    animation: {}, // Animation configuration
  },
});

Type

Specifies the node type, either a built-in node type name or a custom node name. The default is circle (circle). ⚠️ Note: This determines the shape of the main graphic.

const graph = new Graph({
  node: {
    type: 'circle',
  },
});

Available values include:

• circle: Circle Node
• diamond: Diamond Node
• donut: Donut Node
• ellipse: Ellipse Node
• hexagon: Hexagon Node
• html: HTML Node
• image: Image Node
• rect: Rectangle Node
• star: Star Node
• triangle: Triangle Node

Style

Defines the node's style, including color, size, etc.

const graph = new Graph({
  node: {
    style: {},
  },
});

A complete node consists of the following parts:

• key: The main graphic of the node, representing the primary shape, such as a rectangle or circle;
• label: Text label, usually used to display the node's name or description;
• icon: Icon graphic, usually used to display the node's icon, which can be an image or text icon;
• badge: A badge located at the top right corner of the node by default;
• halo: A halo effect graphic displayed around the main graphic;
• port: Connection points on the node for connecting edges.

The following style configurations will be explained in sequence by atomic graphics:

Main Graphic Style

The main graphic is the core part of the node, defining the basic shape and appearance of the node:

Size

Node size, quick setting of node width and height, supports three configuration methods:

• number: Indicates that the node width and height are the same as the specified value
• [number, number]: Indicates that the node width and height are represented by the array elements in order, representing the width and height of the node
• [number, number, number]: Indicates that the node width and height are represented by the array elements in order, representing the width, height, and depth of the node

Cursor

Available values: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | all-scroll | col-resize | row-resize | n-resize | e-resize | s-resize | w-resize | ne-resize | nw-resize | se-resize | sw-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | zoom-in | zoom-out

Example:

const graph = new Graph({
  node: {
    style: {
      fill: '#1783FF', // Fill color
      stroke: '#000', // Stroke color
      lineWidth: 2, // Stroke width
    },
  },
});

The effect is as follows:

createGraph(
  {
    data: {
      nodes: [{ id: 'node1', style: { x: 120, y: 40 } }],
    },
    node: {
      style: { fill: '#1783FF', stroke: '#000', lineWidth: 2 },
    },
  },
  { width: 240, height: 100 },
);

Label Style

Labels are used to display the text information of the node:

LabelPlacement

Available values: left | right | top | bottom | left-top | left-bottom | right-top | right-bottom | top-left | top-right | bottom-left | bottom-right | center | bottom

LabelMaxWidth

When automatic wrapping labelWordWrap is enabled, it wraps when exceeding this width:

• string: Defines the maximum width as a percentage of the node width. For example, 50% means the label width does not exceed half of the node width
• number: Defines the maximum width in pixels. For example, 100 means the maximum width of the label is 100 pixels

For example, set multi-line label text:

{
  "labelWordWrap": true,
  "labelMaxWidth": 200,
  "labelMaxLines": 3
}

Example:

const graph = new Graph({
  node: {
    style: {
      label: true, // Whether to display the node label
      labelText: 'Node Name', // Label text content
      labelFill: '#000', // Label text color
      labelFontSize: 12, // Label font size
      labelFontWeight: 'normal', // Label font weight
      labelPlacement: 'bottom', // Label position relative to the main graphic of the node
    },
  },
});

The effect is as follows:

createGraph(
  {
    data: {
      nodes: [
        {
          id: 'node1',
          style: {
            x: 120,
            y: 40,
            label: true,
            labelText: 'Node Name',
            labelFill: '#000',
            labelFontSize: 12,
            labelFontWeight: 'normal',
            labelPlacement: 'bottom',
          },
        },
      ],
    },
  },
  { width: 240, height: 100 },
);

Label Background Style

The label background is used to display the background of the node label:

Example:

const graph = new Graph({
  node: {
    style: {
      labelBackground: true, // Whether to display the node label background
      labelBackgroundFill: '#000', // Label background fill
      labelBackgroundRadius: 10, // Label background corner radius
      labelBackgroundFillOpacity: 0.5, // Label background opacity
    },
  },
});

The effect is as follows:

createGraph(
  {
    data: {
      nodes: [
        {
          id: 'node1',
          style: {
            x: 120,
            y: 40,
            label: true,
            labelText: 'Node Name',
            labelFill: '#000',
            labelFontSize: 12,
            labelFontWeight: 'normal',
            labelPlacement: 'bottom',
            labelBackground: true,
            labelBackgroundFill: '#000',
            labelBackgroundRadius: 10,
            labelBackgroundFillOpacity: 0.5,
          },
        },
      ],
    },
  },
  { width: 240, height: 100 },
);

Halo Style

PointerEvents

Available values: visible | visiblepainted | visiblestroke | non-transparent-pixel | visiblefill | visible | painted | fill | stroke | all | none | auto | inherit | initial | unset

Example:

const graph = new Graph({
  node: {
    style: {
      halo: true, // Whether to display the node halo
      haloStroke: '#FF0000', // Node halo stroke color
      haloLineWidth: 10, // Node halo stroke width
    },
  },
});

The effect is as follows:

createGraph(
  {
    data: {
      nodes: [
        {
          id: 'node1',
          style: {
            x: 120,
            y: 40,
          },
        },
      ],
    },
    node: {
      style: {
        halo: true,
        haloStroke: '#FF0000',
        haloLineWidth: 10,
      },
    },
  },
  { width: 240, height: 100 },
);

Icon Style

Example:

const graph = new Graph({
  node: {
    style: {
      iconText: 'Text', // Icon text
      iconFill: '#FF0000', // Icon text color
      iconFontSize: 14, // Icon text size
      iconFontWeight: 'bold', // Icon text weight
      iconFontStyle: 'italic', // Icon text style
    },
  },
});

The effect is as follows:

createGraph(
  {
    data: {
      nodes: [
        {
          id: 'node1',
          style: {
            x: 120,
            y: 40,
          },
        },
      ],
    },
    node: {
      style: {
        iconText: 'Text',
        iconFill: '#FF0000',
        iconFontSize: 14,
        iconFontWeight: 'bold',
        iconFontStyle: 'italic',
      },
    },
  },
  { width: 240, height: 100 },
);

Badge Style

BadgeStyleProps

For example, add three badges with different meanings to a node:

const graph = new Graph({
  node: {
    style: {
      badge: true, // Whether to display the badge
      badges: [
        { text: 'A', placement: 'right-top' },
        { text: 'Important', placement: 'right' },
        { text: 'Notice', placement: 'right-bottom' },
      ],
      badgePalette: ['#7E92B5', '#F4664A', '#FFBE3A'], // Badge background color palette
      badgeFontSize: 7, // Badge font size
    },
  },
});

The effect is as follows:

createGraph(
  {
    autoFit: 'center',
    data: {
      nodes: [{ id: 'node1', states: ['focus'] }],
    },
    node: {
      style: {
        badge: true,
        badges: [
          { text: 'A', placement: 'right-top' },
          { text: 'Important', placement: 'right' },
          { text: 'Notice', placement: 'right-bottom' },
        ],
        badgePalette: ['#7E92B5', '#F4664A', '#FFBE3A'],
        badgeFontSize: 7,
      },
    },
  },
  { width: 200, height: 100 },
);

Port Style

PortStyleProps

For example, add four connection ports to a node:

const graph = new Graph({
  node: {
    style: {
      port: true,
      ports: [
        { key: 'top', placement: 'top', fill: '#7E92B5' },
        { key: 'right', placement: 'right', fill: '#F4664A' },
        { key: 'bottom', placement: 'bottom', fill: '#FFBE3A' },
        { key: 'left', placement: [0, 0.5], fill: '#D580FF' },
      ],
      portR: 3,
      portLineWidth: 1,
      portStroke: '#fff',
    },
  },
});

The effect is as follows:

createGraph(
  {
    autoFit: 'center',
    data: {
      nodes: [{ id: 'node1', states: ['focus'] }],
    },
    node: {
      style: {
        port: true,
        ports: [
          { key: 'top', placement: 'top', fill: '#7E92B5' },
          { key: 'right', placement: 'right', fill: '#F4664A' },
          { key: 'bottom', placement: 'bottom', fill: '#FFBE3A' },
          { key: 'left', placement: [0, 0.5], fill: '#D580FF' },
        ],
        portR: 3,
        portLineWidth: 1,
        portStroke: '#fff',
      },
    },
  },
  { width: 200, height: 100 },
);

State

In some interactive behaviors, such as clicking to select a node or hovering to activate an edge, it is merely marking certain states on the element. To reflect these states in the visual space seen by the end user, we need to set different graphic element styles for different states to respond to the changes in the element's state.

G6 provides several built-in states, including selected, highlight, active, inactive, and disabled. Additionally, it supports custom states to meet more specific needs. For each state, developers can define a set of style rules that will override the default styles of the element.

The data structure is as follows:

type NodeState = {
  [state: string]: NodeStyle;
};

For example, when a node is in the focus state, you can add a stroke with a width of 3 and a color of orange.

const graph = new Graph({
  node: {
    state: {
      focus: {
        lineWidth: 3, // Stroke width
        stroke: 'orange', // Stroke color
      },
    },
  },
});

The effect is as follows:

createGraph(
  {
    autoFit: 'center',
    data: {
      nodes: [{ id: 'node1', states: ['focus'] }],
    },
    node: {
      state: {
        focus: {
          lineWidth: 3,
          stroke: 'orange',
        },
      },
    },
  },
  { width: 200, height: 100 },
);

Animation

Defines the node's animation effects, supporting the following two configuration methods:

1. Turn off all node animations

{
  "node": {
    "animation": false
  }
}

2. Configure stage animations

Stage animations refer to the animation effects of nodes when entering the canvas, updating, and leaving the canvas. The currently supported stages include:

• enter: Animation when the node enters the canvas
• update: Animation when the node updates
• exit: Animation when the node leaves the canvas
• show: Animation when the node is displayed from a hidden state
• hide: Animation when the node is hidden
• collapse: Animation when the node is collapsed
• expand: Animation when the node is expanded

You can refer to Animation Paradigm to use animation syntax to configure nodes, such as:

{
  "node": {
    "animation": {
      "update": [
        {
          "fields": ["x", "y"], // Only animate the x and y attributes during updates
          "duration": 1000, // Animation duration
          "easing": "linear" // Easing function
        }
      ]
    }
  }
}

You can also use built-in animation effects:

{
  "node": {
    "animation": {
      "enter": "fade", // Use fade animation
      "update": "translate", // Use translate animation
      "exit": "fade" // Use fade animation
    }
  }
}

You can pass in false to turn off animations for specific stages:

{
  "node": {
    "animation": {
      "enter": false // Turn off node entrance animation
    }
  }
}

Palette

Defines the node's palette, which is a predefined pool of node colors, and assigns colors to the fill attribute based on rules.

For the definition of palettes, please refer to Palette.

For example, assign node colors based on the category field of a set of data, so that nodes of the same category have the same color:

{
  "node": {
    "palette": {
      "type": "group",
      "field": "category",
      "color": ["#1783FF", "#F08F56", "#D580FF", "#00C9C9", "#7863FF"]
    }
  }
}

The effect is as follows:

createGraph(
  {
    data: {
      nodes: new Array(10)
        .fill(0)
        .map((_, i) => ({ id: `node-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })),
    },
    layout: { type: 'grid', cols: 10 },
    node: {
      palette: {
        type: 'group',
        field: 'category',
        color: ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF'],
      },
    },
  },
  { width: 600, height: 100 },
);

You can also use the default configuration:

{
  "node": {
    "palette": "tableau" // tableau is the palette name, default assigns colors based on ID
  }
}

The effect is as follows:

createGraph(
  {
    data: {
      nodes: new Array(10)
        .fill(0)
        .map((_, i) => ({ id: `node-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })),
    },
    layout: { type: 'grid', cols: 10 },
    node: {
      palette: 'tableau',
    },
  },
  { width: 600, height: 100 },
);