This article introduces the configuration of edge attributes. The configuration is located as follows:

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

const graph = new Graph({
  edge: {
    type: 'line',
    style: {},
    state: {},
    palette: {},
    animation: {},
  },
});

Edge Type (type)

The type attribute specifies the edge type, which can be either a built-in type or a custom name. By default, it is set to line (a straight edge).

For more built-in edge types, refer to the Edge Registry.

Edge Style (style)

This attribute defines the edge's visual style, including elements such as color and size.

For a deeper understanding of the structure of edges, please see Core Concepts - Elements - Edge.

Below is a breakdown of style configurations:

Main Shape Style

Label Style

Halo Style

Badge Style

Start Arrow Style

End Arrow Style

Loop Edge Style

State Style Attributes (state)

In interactive behaviors such as selecting an edge by clicking or activating an edge by hovering over it, the element merely marks its state. To visually reflect these states to the user, we assign different styles for each state of the graphical element in response to state changes.

G6 provides several built-in states, including selected, highlight, active, inactive, and disabled, and also supports custom states for more specific requirements. For each state, developers can define a set of style rules that override the element's default styles.

For instance, when an edge is in the focus state, a halo with a width of 6 and a yellow color can be added.

{
  "edge": {
    "state": {
      "focus": {
        "halo": true,
        "haloLineWidth": 6,
        "haloStroke": "yellow"
      }
    }
  }
}

Animation Attributes (animation)

Defines animation effects for edges. The following configurations are

supported:

1. Disable all edge animations:

{
  "edge": {
    "animation": false
  }
}

2. Stage-based animation configuration:

Stage animations refer to effects applied when an edge enters, updates, or exits the canvas. Supported stages include:

• enter, update, exit, show, hide, collapse, and expand.

To configure animations using a paradigm:

{
  "node": {
    "animation": {
      "update": [
        {
          "fields": ["stroke"], // Animate only the stroke property
          "duration": 1000, // Duration of the animation
          "easing": "linear" // Easing function
        }
      ],
  }
}

Palette Attributes (palette)

Defines a predefined color pool for edges and maps colors to the stroke property according to rules.

For palette definitions, refer to Core Concepts - Palette.

For example, to assign node colors based on the direction field so that nodes with the same category have the same color:

{
  "edge": {
    "palette": {
      "type": "group",
      "field": "direction",
      "color": ["#F08F56", "#00C9C9"]
    }
  }
}

The effect is shown below:

createGraph(
  {
    data: {
      nodes: new Array(6).fill(0).map((_, i) => ({ id: `node-${i + 1}` })),
      edges: [
        { source: 'node-1', target: 'node-2', data: { direction: 'out' } },
        { source: 'node-1', target: 'node-3', data: { direction: 'out' } },
        { source: 'node-1', target: 'node-4', data: { direction: 'out' } },
        { source: 'node-5', target: 'node-1', data: { direction: 'in' } },
        { source: 'node-6', target: 'node-1', data: { direction: 'in' } },
      ],
    },
    layout: {
      type: 'radial',
      unitRadius: 120,
      linkDistance: 120,
    },
    edge: {
      style: {
        endArrow: true,
      },
      palette: {
        type: 'group',
        field: 'direction',
        color: ['#F08F56', '#00C9C9'],
      },
    },
  },
  { width: 600, height: 300 },
);

You can also use the default configuration:

{
  "edge": {
    "palette": "tableau" // tableau is the palette name, it assigns colors based on ID by default.
  }
}

The effect is shown below:

createGraph(
  {
    data: {
      nodes: new Array(6).fill(0).map((_, i) => ({ id: `node-${i + 1}` })),
      edges: [
        { source: 'node-1', target: 'node-2', data: { direction: 'out' } },
        { source: 'node-1', target: 'node-3', data: { direction: 'out' } },
        { source: 'node-1', target: 'node-4', data: { direction: 'out' } },
        { source: 'node-5', target: 'node-1', data: { direction: 'in' } },
        { source: 'node-6', target: 'node-1', data: { direction: 'in' } },
      ],
    },
    layout: {
      type: 'radial',
      unitRadius: 120,
      linkDistance: 120,
    },
    edge: {
      style: {
        endArrow: true,
      },
      palette: 'tableau',
    },
  },
  { width: 600, height: 300 },
);