This document introduces node properties.

style.Type Property type

Specifies the node type, either a built-in node type name or a custom node name. Defaults to circle. For more built-in supported node types, refer to the Node Registry.

style.Style Property style

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

For an in-depth understanding of node composition, read Core Concepts - Element - Node.

The following style will be explained sequentially based on atomic shapes:

style.Main Shape Style key

style.Label Style label

style.Halo Style halo

style.Icon Style icon

style.Badge Style badges

style.BadgeStyleProps

Example: Adding three badges with different meanings to a node:

{
  "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
    }
  }
}

The resulting 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 },
);

style.Port Style ports

style.PortStyleProps

Example: Adding four connection ports to a node:

{
  "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 resulting 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 },
);

style.State Style Properties state

In certain interactive behaviors, such as selecting a node by clicking or activating an edge by hovering, the element merely undergoes a state change to indicate its status. To visually reflect these state changes for end users, different graphical styles must be defined for each state, which respond to state transitions of the element.

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

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

{
  "node": {
    "state": {
      "focus": {
        "lineWidth": 3,
        "stroke": "orange"
      }
    }
  }
}

The resulting effect is as follows:

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

style.Animation animation

Defines the animation effect of the node, and supports the following two configuration methods:

1. disable all animation of the node

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

2. Configuring stage animation

Stage animation is the animation effect of a node when it enters the graph, updates, and leaves the graph. Currently supported stages include:

• enter: animation when a node enters the graph
• update: animation when the node is updated.
• exit: animation when the node leaves the graph
• show: animation when the node is shown from 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 configure the node using the animation syntax, e.g.:

{
  "node": {
    "animation": {
      "update": [
        {
          "fields": ["x", "y"], // update animates only the x and y attributes
          "duration": 1000, // duration of the animation
          "easing": "linear" // the easing function
        }
      ]
    }
  }
}

Built-in animation effects can also be used:

{
  "node": {
    "animation": {
      "enter": "fade", // use a fade animation
      "update": "translate", // Use a panning animation.
      "exit": "fade" // Use the fade animation.
    }
  }
}

You can pass in false to turn off animation for a particular stage:

{
  "node": {
    "animation": {
      "enter": false // Turn off the node entry animation.
    }
  }
}

style.Palette Properties palette

This defines the node's palette, a predefined set of node colors that are allocated according to specific rules, with the colors mapped to the fill property.

For the definition of a palette, please refer to Core Concepts - Palette.

For example, when assigning node colors based on the category attribute, ensuring nodes in the same category share the same color:

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

The result is displayed in the following figure:

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 },
);

Alternatively, the default configuration can also be used:

{
  "node": {
    "palette": "tableau" // 'tableau' is the name of the palette, and colors are allocated based on the ID by default.
  }
}

The result is displayed in the following figure:

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 },
);