What is an Edge

An edge is one of the basic elements in a graph, used to connect two nodes or combos, representing the relationship between them. In G6, edges are directional, pointing from source to target, but you can configure them to hide the arrow to represent undirected connections.

You can create edges between any two nodes, combos, or between a node and a combo, and you can express different types of relationships by creating multiple edges.

G6 provides the following built-in edges:

• line Straight line edge
• polyline Polyline edge
• quadratic Quadratic Bezier curve edge
• cubic Cubic Bezier curve edge
• cubicVertical Vertical cubic Bezier curve edge
• cubicHorizontal Horizontal cubic Bezier curve edge

Data Structure

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

An example of a data item in the edges array:

{
  "source": "alice",
  "target": "bob",
  "type": "line",
  "data": { "relationship": "friend", "strength": 5 },
  "style": { "stroke": "green", "lineWidth": 2 },
  "states": ["hover"]
}

Configuration Methods

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

• Use graph.setEdge() for dynamic configuration
• Global configuration when instantiating the graph
• Dynamic attributes in data

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

Using graph.setEdge()

You can dynamically set the style mapping logic of edges using graph.setEdge() after the graph instance is created.

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

graph.setEdge({
  style: {
    type: 'line',
    style: { stroke: '#5CACEE', lineWidth: 2 },
  },
});

graph.render();

Global Configuration When Instantiating the Graph

You can configure edge style mapping globally when instantiating the graph, and this configuration will take effect on all edges.

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

const graph = new Graph({
  edge: {
    type: 'line',
    style: { stroke: '#5CACEE', lineWidth: 2 },
  },
});

Dynamic Configuration in Data

If you need different configurations for different edges, you can write the configuration into the edge data. This configuration method can be directly written into the data in the form of the following code:

const data = {
  edges: [
    {
      source: 'node-1',
      target: 'node-2',
      type: 'line',
      style: { stroke: 'orange' },
    },
  ],
};

Adjusting Priority

If you want the configuration in the data to have a higher priority than the global configuration, you can take the following approach:

const data = {
  edges: [
    {
      source: 'node-1',
      target: 'node-2',
      type: 'line',
      style: { stroke: 'orange' },
    },
  ],
};

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

Custom Edges

When built-in edges cannot meet the requirements, G6 provides powerful customization capabilities:

• Extend built-in edges
• Create entirely new edge types

Unlike combos, custom edges need to be registered before use. For detailed tutorials, please refer to the Custom Edge documentation.