Edge Common Configuration

This document introduces the built-in edge common property configurations.

EdgeOptions

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

const graph = new Graph({
  edge: {
    type: 'line', // Edge type
    style: {}, // Edge style
    state: {}, // State styles
    palette: {}, // Palette configuration
    animation: {}, // Animation configuration
  },
});

Property	Description	Type	Default
type	Edge type, built-in edge type name or custom edge name	Type	`line`
style	Edge style configuration, including color, thickness, etc.	Style	-
state	Style configuration for different states	State	-
palette	Define edge palette for mapping colors based on different data	Palette	-
animation	Define edge animation effects	Animation	-

Type

Specify the edge type, built-in edge type name or custom edge name. Default is line (straight line edge). ⚠️ Note: This determines the shape of the main graphic.

const graph = new Graph({
  edge: {
    type: 'polyline',
  },
});

⚠️ Dynamic Configuration Note: The type property also supports dynamic configuration, allowing you to dynamically select edge types based on edge data:

const graph = new Graph({
  edge: {
    // Static configuration
    type: 'line',

    // Dynamic configuration - arrow function form
    type: (datum) => datum.data.edgeType || 'line',

    // Dynamic configuration - regular function form (can access graph instance)
    type: function (datum) {
      console.log(this); // graph instance
      return datum.data.importance > 5 ? 'polyline' : 'line';
    },
  },
});

Available values:

line: Straight line edge
polyline: Polyline edge
cubic: Cubic Bezier curve edge
cubic-horizontal: Horizontal cubic Bezier curve edge
cubic-vertical: Vertical cubic Bezier curve edge
quadratic: Quadratic Bezier curve edge

Style

Define edge styles, including color, thickness, etc.

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

⚠️ Dynamic Configuration Note: All the following style properties support dynamic configuration, meaning you can pass functions to dynamically calculate property values based on edge data:

const graph = new Graph({
  edge: {
    style: {
      // Static configuration
      stroke: '#1783FF',

      // Dynamic configuration - arrow function form
      lineWidth: (datum) => (datum.data.isImportant ? 3 : 1),

      // Dynamic configuration - regular function form (can access graph instance)
      lineDash: function (datum) {
        console.log(this); // graph instance
        return datum.data.type === 'dashed' ? [5, 5] : [];
      },

      // Nested properties also support dynamic configuration
      labelText: (datum) => `Edge: ${datum.id}`,
      endArrow: (datum) => datum.data.hasArrow,
    },
  },
});

Where the datum parameter is the edge data object (EdgeData), containing all data information of the edge.

A complete edge consists of the following parts:

key: The main graphic of the edge, representing the main path of the edge, such as straight lines, curves, etc.
label: Text label, usually used to display the name or description of the edge
badge: Badge on the edge
halo: The halo effect graphic displayed around the main graphic
startArrow: Arrow at the starting end of the edge
endArrow: Arrow at the ending end of the edge

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

Main Graphic Styles

The main graphic is the core part of the edge, defining the basic path and appearance of the edge. Here are common configuration scenarios:

Basic Style Configuration

Set the basic appearance of the edge:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 40 } },
      { id: 'node2', style: { x: 180, y: 40 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#5B8FF9', // Blue edge
      lineWidth: 2, // Edge width
    },
  },
});

graph.render();

Dashed Line Style

Create edges with dashed line style:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 40 } },
      { id: 'node2', style: { x: 180, y: 40 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#F5222D',
      lineWidth: 2,
      lineDash: [6, 4], // Dashed line style
      lineDashOffset: 0,
    },
  },
});

graph.render();

Shadow Effect

Add shadow effect to edges:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 40 } },
      { id: 'node2', style: { x: 180, y: 40 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#722ED1',
      lineWidth: 3,
      shadowColor: 'rgba(114, 46, 209, 0.3)',
      shadowBlur: 8,
      shadowOffsetX: 2,
      shadowOffsetY: 2,
    },
  },
});

graph.render();

The following is the complete main graphic style configuration:

Property	Description	Type	Default
cursor	Mouse cursor style when hovering over edge, options	string	`default`
increasedLineWidthForHitTesting	When lineWidth is small, the interactive area also becomes small. We can increase this area to make "thin lines" easier to pick up	number	0
lineDash	Edge dash line style	number[]	-
lineDashOffset	Edge dash line offset	number	0
lineWidth	Edge width	number	1
opacity	Edge opacity	number \| string	1
pointerEvents	How edge responds to pointer events, options	string	`auto`
shadowBlur	Edge shadow blur	number	-
shadowColor	Edge shadow color	string	-
shadowOffsetX	Edge shadow offset in x direction	number \| string	-
shadowOffsetY	Edge shadow offset in y direction	number \| string	-
shadowType	Edge shadow type	`inner` \| `outer`	`outer`
sourcePort	Connection port at the source end of the edge	string	-
stroke	Edge color	string	`#000`
strokeOpacity	Edge color opacity	number \| string	1
targetPort	Connection port at the target end of the edge	string	-
transform	Transform property allows you to rotate, scale, skew, or translate the given edge	string	-
transformOrigin	The center of rotation and scaling, also known as the transform center	string	-
visibility	Whether the edge is visible	`visible` \| `hidden`	`visible`
zIndex	Edge rendering layer	number	1

PointerEvents

The pointerEvents property controls how graphics respond to interaction events. Refer to MDN documentation.

In short, both stroke and visibility can independently or in combination affect hit testing behavior. Currently supports the following keywords:

auto: Default value, equivalent to visiblepainted
none: Never becomes a target for responding to events
visiblepainted: Responds to events only when the following conditions are met:
- visibility is set to visible, i.e., the graphic is visible
- Triggered in the graphic stroke area while stroke takes a non-none value
visiblestroke: Responds to events only when the following conditions are met:
- visibility is set to visible, i.e., the graphic is visible
- Triggered in the graphic stroke area, not affected by stroke value
visible: Responds to events only when the following conditions are met:
- visibility is set to visible, i.e., the graphic is visible
- Triggered in the graphic stroke area, not affected by stroke value
painted: Responds to events only when the following conditions are met:
- Triggered in the graphic stroke area while stroke takes a non-none value
- Not affected by visibility value
stroke: Responds to events only when the following conditions are met:
- Triggered in the graphic stroke area, not affected by stroke value
- Not affected by visibility value
all: Responds to events as long as entering the graphic stroke area, not affected by stroke or visibility values

Usage Examples:

// Example 1: Only stroke area responds to events
const graph = new Graph({
  edge: {
    style: {
      stroke: '#000',
      lineWidth: 2,
      pointerEvents: 'stroke', // Only stroke responds to events
    },
  },
});

// Example 2: Completely non-responsive to events
const graph = new Graph({
  edge: {
    style: {
      pointerEvents: 'none', // Edge does not respond to any events
    },
  },
});

Cursor

Label Styles

Labels are used to display text information for edges, supporting various style configurations and layout options. Here are common usage scenarios:

Basic Text Label

The simplest text label configuration:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 120,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 60 } },
      { id: 'node2', style: { x: 180, y: 60 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      labelText: 'Edge Label',
      labelFill: '#262626',
      labelFontSize: 12,
      labelPlacement: 'center',
    },
  },
});

graph.render();

Multi-line Text Label

When text is long, you can set automatic line wrapping:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 120,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 60 } },
      { id: 'node2', style: { x: 180, y: 60 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      labelText: 'This is a very long edge label that needs line wrapping',
      labelWordWrap: true,
      labelMaxWidth: '200%',
      labelMaxLines: 2,
      labelTextOverflow: 'ellipsis',
      labelFill: '#434343',
      labelPlacement: 'center',
      labelTextAlign: 'center',
    },
  },
});

graph.render();

Label with Background

Add background to labels for better readability:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 120,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 60 } },
      { id: 'node2', style: { x: 180, y: 60 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      labelText: 'Important Connection',
      labelBackground: true,
      labelBackgroundFill: 'rgba(250, 140, 22, 0.1)',
      labelBackgroundRadius: 6,
      labelPadding: [4, 8],
      labelFill: '#D4380D',
      labelFontWeight: 'bold',
      labelPlacement: 'center',
    },
  },
});

graph.render();

Auto-rotating Label

Labels can automatically rotate to align with edge direction:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 120,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 30 } },
      { id: 'node2', style: { x: 180, y: 90 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      labelText: 'Auto Rotate',
      labelAutoRotate: true, // Auto rotate
      labelFill: '#1890FF',
      labelFontWeight: 'bold',
      labelPlacement: 'center',
    },
  },
});

graph.render();

The following is the complete label style configuration:

Property	Description	Type	Default
label	Whether to show edge label	boolean	true
labelAutoRotate	Whether edge label automatically rotates to align with edge direction	boolean	true
labelCursor	Mouse cursor style when hovering over edge label, options	string	`default`
labelFill	Edge label text color	string	-
labelFontFamily	Edge label font family	string	-
labelFontSize	Edge label font size	number	12
labelFontStyle	Edge label font style	`normal` \| `italic` \| `oblique`	-
labelFontVariant	Edge label font variant	`normal` \| `small-caps` \| string	-
labelFontWeight	Edge label font weight	`normal` \| `bold` \| `bolder` \| `lighter` \| number	-
labelLeading	Line spacing	number	0
labelLetterSpacing	Edge label letter spacing	number \| string	-
labelLineHeight	Edge label line height	number \| string	-
labelMaxLines	Edge label maximum lines	number	1
labelMaxWidth	Edge label maximum width, options	number \| string	`200%`
labelOffsetX	Edge label offset in x direction	number	0
labelOffsetY	Edge label offset in y direction	number	0
labelPadding	Edge label padding	number \| number[]	0
labelPlacement	Edge label position relative to edge, options	string \| number	`center`
labelText	Edge label text content	`string` \| `(datum) => string`	-
labelTextAlign	Edge label text horizontal alignment	`start` \| `center` \| `middle` \| `end` \| `left` \| `right`	`left`
labelTextBaseline	Edge label text baseline	`top` \| `hanging` \| `middle` \| `alphabetic` \| `ideographic` \| `bottom`	-
labelTextDecorationColor	Edge label text decoration line color	string	-
labelTextDecorationLine	Edge label text decoration line	string	-
labelTextDecorationStyle	Edge label text decoration line style	`solid` \| `double` \| `dotted` \| `dashed` \| `wavy`	-
labelTextOverflow	Edge label text overflow handling	`clip` \| `ellipsis` \| string	-
labelTextPath	Edge label text path	Path	-
labelWordWrap	Whether to enable automatic line wrapping for edge labels. When enabled, text exceeding labelMaxWidth will wrap	boolean	false
labelZIndex	Edge label rendering layer	number	0

LabelPlacement

Edge label position relative to the edge, can be set to:

start: Label positioned at the starting point of the edge
center: Label positioned at the center of the edge (default)
end: Label positioned at the ending point of the edge
number: Value range 0-1, representing the specific position ratio of the label on the edge, 0 for start position, 1 for end position

LabelMaxWidth

After enabling automatic line wrapping labelWordWrap, text exceeding this width will wrap:

string: Represents the maximum width defined as a percentage relative to the edge length. For example, 50% means the label width does not exceed half the edge length
number: Represents the maximum width defined in pixels. For example, 100 means the label's maximum width is 100 pixels

For example, setting multi-line label text:

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

Label Background Styles

Label background is used to display the background of edge labels:

Property	Description	Type	Default
labelBackground	Whether to show edge label background	boolean	false
labelBackgroundCursor	Edge label background mouse cursor style, options	string	`default`
labelBackgroundFill	Edge label background fill color	string	-
labelBackgroundFillOpacity	Edge label background opacity	number	1
labelBackgroundHeight	Edge label background height	string \| number	-
labelBackgroundLineDash	Edge label background dash line configuration	number \| string \|(number \| string )[]	-
labelBackgroundLineDashOffset	Edge label background dash line offset	number	-
labelBackgroundLineWidth	Edge label background stroke line width	number	-
labelBackgroundRadius	Edge label background border radius - number: Uniform radius for all corners - number[]: Individual radius for each corner, auto-filled if insufficient	number \| number[]	0
labelBackgroundShadowBlur	Edge label background shadow blur	number	-
labelBackgroundShadowColor	Edge label background shadow color	string	-
labelBackgroundShadowOffsetX	Edge label background shadow X offset	number	-
labelBackgroundShadowOffsetY	Edge label background shadow Y offset	number	-
labelBackgroundStroke	Edge label background stroke color	string	-
labelBackgroundStrokeOpacity	Edge label background stroke opacity	number \| string	1
labelBackgroundVisibility	Edge label background visibility	`visible` \| `hidden`	-
labelBackgroundZIndex	Edge label background rendering layer	number	1

Halo Styles

Halo is an effect displayed around the edge main graphic, usually used for highlighting or indicating special states of the edge.

Basic Halo Effect

Add basic halo effect to edges:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 50 } },
      { id: 'node2', style: { x: 180, y: 50 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      lineWidth: 2,
      halo: true,
      haloStroke: '#1890FF',
      haloLineWidth: 6,
      haloStrokeOpacity: 0.3,
    },
  },
});

graph.render();

The following is the complete halo style configuration:

Property	Description	Type	Default
halo	Whether to show edge halo	boolean	false
haloCursor	Edge halo mouse cursor style, options	string	`default`
haloDraggable	Whether edge halo allows dragging	boolean	true
haloDroppable	Whether edge halo allows receiving dragged elements	boolean	true
haloFillRule	Edge halo fill rule	`nonzero` \| `evenodd`	-
haloFilter	Edge halo filter	string	-
haloLineWidth	Edge halo stroke width	number	3
haloPointerEvents	Whether edge halo responds to pointer events, options	string	`none`
haloStroke	Edge halo stroke color, this property sets the color of the halo around the edge	string	Consistent with main graphic stroke color
haloStrokeOpacity	Edge halo stroke opacity	number	0.25
haloVisibility	Edge halo visibility	`visible` \| `hidden`	`visible`
haloZIndex	Edge halo rendering layer	number	-1

Arrow Styles

Edges support adding arrows at the start and end points to indicate the directionality of the edge.

Basic Arrow

Add basic arrow to the end of the edge:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 50 } },
      { id: 'node2', style: { x: 180, y: 50 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#1890FF',
      lineWidth: 2,
      endArrow: true, // End arrow
      endArrowType: 'vee', // Arrow type
      endArrowSize: 10, // Arrow size
    },
  },
});

graph.render();

Bidirectional Arrows

Add arrows to both ends of the edge:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 50 } },
      { id: 'node2', style: { x: 180, y: 50 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#52C41A',
      lineWidth: 2,
      startArrow: true, // Start arrow
      startArrowType: 'circle',
      startArrowSize: 8,
      endArrow: true, // End arrow
      endArrowType: 'triangle',
      endArrowSize: 10,
    },
  },
});

graph.render();

Custom Arrow Style

Customize arrow color and type:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 50 } },
      { id: 'node2', style: { x: 180, y: 50 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#722ED1',
      lineWidth: 3,
      endArrow: true,
      endArrowType: 'diamond', // Diamond arrow
      endArrowSize: 12,
      endArrowFill: '#FF4D4F', // Red arrow fill
      endArrowStroke: '#722ED1', // Arrow stroke color
      endArrowStrokeOpacity: 0.8,
    },
  },
});

graph.render();

Start Arrow Style Configuration

Property	Description	Type	Default
startArrow	Whether to show edge start arrow	boolean	false
startArrowCursor	Edge start arrow mouse cursor style, options	string	`default`
startArrowFill	Edge start arrow fill color	string	Default consistent with edge color
startArrowFillOpacity	Edge start arrow fill opacity	number	1
startArrowOffset	Edge start arrow offset	number	0
startArrowSize	Edge start arrow size	number \| [number, number]	10
startArrowStroke	Edge start arrow stroke color	string	Default consistent with edge color
startArrowStrokeOpacity	Edge start arrow stroke opacity	number	1
startArrowType	Edge start arrow type	`triangle` \| `circle` \| `diamond` \| `vee` \| `rect` \| `triangleRect` \| `simple`	`vee`

End Arrow Style Configuration

Property	Description	Type	Default
endArrow	Whether to show edge end arrow	boolean	false
endArrowCursor	Edge end arrow mouse cursor style, options	string	`default`
endArrowFill	Edge end arrow fill color	string	Default consistent with edge color
endArrowFillOpacity	Edge end arrow fill opacity	number	1
endArrowOffset	Edge end arrow offset	number	0
endArrowSize	Edge end arrow size	number \| [number, number]	10
endArrowStroke	Edge end arrow stroke color	string	Default consistent with edge color
endArrowStrokeOpacity	Edge end arrow stroke opacity	number	1
endArrowType	Edge end arrow type	`triangle` \| `circle` \| `diamond` \| `vee` \| `rect` \| `triangleRect` \| `simple`	`vee`

Loop Edge Styles

Loop edges are special edges where the start and end nodes are the same node.

Basic Loop Edge

Create a basic loop edge:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', style: { x: 100, y: 50 } }],
    edges: [{ source: 'node1', target: 'node1' }],
  },
  edge: {
    style: {
      stroke: '#1890FF',
      lineWidth: 2,
      endArrow: true,
      loopPlacement: 'top', // Loop position
      loopDist: 30, // Loop size
    },
  },
});

graph.render();

Multiple Loop Edges

Create multiple loop edges at different positions for the same node:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 120,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', style: { x: 100, y: 60 } }],
    edges: [
      { id: 'edge1', source: 'node1', target: 'node1' },
      { id: 'edge2', source: 'node1', target: 'node1' },
      { id: 'edge3', source: 'node1', target: 'node1' },
    ],
  },
  edge: {
    style: {
      lineWidth: 2,
      endArrow: true,
      loopPlacement: (datum) => {
        const placements = ['top', 'right', 'bottom'];
        return placements[parseInt(datum.id.slice(-1)) - 1];
      },
      loopDist: 25,
      stroke: (datum) => {
        const colors = ['#1890FF', '#52C41A', '#722ED1'];
        return colors[parseInt(datum.id.slice(-1)) - 1];
      },
    },
  },
});

graph.render();

The following is the complete loop edge style configuration:

Property	Description	Type	Default
loop	Whether to enable loop edges	boolean	true
loopClockwise	Whether to draw the loop clockwise	boolean	true
loopDist	Distance from node edge to loop top, used to specify loop curvature	number	Default to max node size
loopPlacement	Loop edge position	`left` \| `right` \| `top` \| `bottom` \| `left-top` \| `left-bottom` \| `right-top` \| `right-bottom` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right`	`top`

State

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

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 element's default styles.

The data structure is as follows:

type EdgeState = {
  [state: string]: EdgeStyle;
};

For example, when an edge is in the focus state, you can add a halo with a width of 6 and orange color.

const graph = new Graph({
  edge: {
    state: {
      focus: {
        halo: true,
        haloLineWidth: 6,
        haloStroke: 'orange',
        haloStrokeOpacity: 0.6,
      },
    },
  },
});

The effect is shown in the following image:

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

const graph = new Graph({
  container: 'container',
  width: 300,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1' }, { id: 'node2' }],
    edges: [{ source: 'node1', target: 'node2', states: ['focus'] }],
  },
  edge: {
    state: {
      focus: {
        halo: true,
        haloLineWidth: 6,
        haloStroke: 'orange',
      },
    },
  },
  layout: {
    type: 'grid',
    cols: 2,
  },
});

graph.render();

Animation

Define edge animation effects. Supports the following two configuration methods:

Disable all edge animations

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

Configure stage animations

Stage animations refer to the animation effects when edges enter the canvas, update, or leave the canvas. Currently supported stages include:

enter: Animation when edge enters the canvas
update: Animation when edge updates
exit: Animation when edge leaves the canvas
show: Animation when edge shows from hidden state
hide: Animation when edge hides
collapse: Animation when edge collapses
expand: Animation when edge expands

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

{
  "edge": {
    "animation": {
      "update": [
        {
          "fields": ["stroke"], // Only animate stroke property during update
          "duration": 1000, // Animation duration
          "easing": "linear" // Easing function
        }
      ]
    }
  }
}

You can also use built-in animation effects:

{
  "edge": {
    "animation": {
      "enter": "fade", // Use fade animation
      "update": "path-in", // Use path animation
      "exit": "fade" // Use fade animation
    }
  }
}

You can pass false to disable specific stage animations:

{
  "edge": {
    "animation": {
      "enter": false // Disable edge entrance animation
    }
  }
}

Palette

Define the edge palette, which is a predefined edge color pool that is allocated according to rules and maps colors to the stroke property.

For palette definitions, please refer to Palette.

Property	Description	Type	Default
color	Palette colors. If the palette is registered, you can directly specify its registration name, or accept a color array	string \| string[]	-
field	Specify the grouping field in element data. If not specified, defaults to using id as grouping field	string \| ((datum) => string)	`id`
invert	Whether to invert the palette	boolean	false
type	Specify current palette type. - `group`: Discrete palette - `value`: Continuous palette	`group` \| `value`	`group`

For example, to assign edge colors to a group of data by the direction field, making edges of the same category have the same color:

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

The effect is shown in the following image:

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

const graph = new Graph({
  container: 'container',
  width: 600,
  height: 300,
  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'],
    },
  },
});

graph.render();

You can also use default configuration:

{
  "edge": {
    "palette": "tableau" // tableau is the palette name, colors assigned by ID by default
  }
}

The effect is shown in the following image:

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

const graph = new Graph({
  container: 'container',
  width: 600,
  height: 300,
  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',
  },
});

graph.render();

This document introduces the built-in edge common property configurations.

EdgeOptions

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

const graph = new Graph({
  edge: {
    type: 'line', // Edge type
    style: {}, // Edge style
    state: {}, // State styles
    palette: {}, // Palette configuration
    animation: {}, // Animation configuration
  },
});

Property	Description	Type	Default
type	Edge type, built-in edge type name or custom edge name	Type	`line`
style	Edge style configuration, including color, thickness, etc.	Style	-
state	Style configuration for different states	State	-
palette	Define edge palette for mapping colors based on different data	Palette	-
animation	Define edge animation effects	Animation	-

Type

Specify the edge type, built-in edge type name or custom edge name. Default is line (straight line edge). ⚠️ Note: This determines the shape of the main graphic.

const graph = new Graph({
  edge: {
    type: 'polyline',
  },
});

⚠️ Dynamic Configuration Note: The type property also supports dynamic configuration, allowing you to dynamically select edge types based on edge data:

const graph = new Graph({
  edge: {
    // Static configuration
    type: 'line',

    // Dynamic configuration - arrow function form
    type: (datum) => datum.data.edgeType || 'line',

    // Dynamic configuration - regular function form (can access graph instance)
    type: function (datum) {
      console.log(this); // graph instance
      return datum.data.importance > 5 ? 'polyline' : 'line';
    },
  },
});

Available values:

line: Straight line edge
polyline: Polyline edge
cubic: Cubic Bezier curve edge
cubic-horizontal: Horizontal cubic Bezier curve edge
cubic-vertical: Vertical cubic Bezier curve edge
quadratic: Quadratic Bezier curve edge

Style

Define edge styles, including color, thickness, etc.

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

⚠️ Dynamic Configuration Note: All the following style properties support dynamic configuration, meaning you can pass functions to dynamically calculate property values based on edge data:

const graph = new Graph({
  edge: {
    style: {
      // Static configuration
      stroke: '#1783FF',

      // Dynamic configuration - arrow function form
      lineWidth: (datum) => (datum.data.isImportant ? 3 : 1),

      // Dynamic configuration - regular function form (can access graph instance)
      lineDash: function (datum) {
        console.log(this); // graph instance
        return datum.data.type === 'dashed' ? [5, 5] : [];
      },

      // Nested properties also support dynamic configuration
      labelText: (datum) => `Edge: ${datum.id}`,
      endArrow: (datum) => datum.data.hasArrow,
    },
  },
});

Where the datum parameter is the edge data object (EdgeData), containing all data information of the edge.

A complete edge consists of the following parts:

key: The main graphic of the edge, representing the main path of the edge, such as straight lines, curves, etc.
label: Text label, usually used to display the name or description of the edge
badge: Badge on the edge
halo: The halo effect graphic displayed around the main graphic
startArrow: Arrow at the starting end of the edge
endArrow: Arrow at the ending end of the edge

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

Main Graphic Styles

The main graphic is the core part of the edge, defining the basic path and appearance of the edge. Here are common configuration scenarios:

Basic Style Configuration

Set the basic appearance of the edge:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 40 } },
      { id: 'node2', style: { x: 180, y: 40 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#5B8FF9', // Blue edge
      lineWidth: 2, // Edge width
    },
  },
});

graph.render();

Dashed Line Style

Create edges with dashed line style:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 40 } },
      { id: 'node2', style: { x: 180, y: 40 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#F5222D',
      lineWidth: 2,
      lineDash: [6, 4], // Dashed line style
      lineDashOffset: 0,
    },
  },
});

graph.render();

Shadow Effect

Add shadow effect to edges:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 40 } },
      { id: 'node2', style: { x: 180, y: 40 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#722ED1',
      lineWidth: 3,
      shadowColor: 'rgba(114, 46, 209, 0.3)',
      shadowBlur: 8,
      shadowOffsetX: 2,
      shadowOffsetY: 2,
    },
  },
});

graph.render();

The following is the complete main graphic style configuration:

Property	Description	Type	Default
cursor	Mouse cursor style when hovering over edge, options	string	`default`
increasedLineWidthForHitTesting	When lineWidth is small, the interactive area also becomes small. We can increase this area to make "thin lines" easier to pick up	number	0
lineDash	Edge dash line style	number[]	-
lineDashOffset	Edge dash line offset	number	0
lineWidth	Edge width	number	1
opacity	Edge opacity	number \| string	1
pointerEvents	How edge responds to pointer events, options	string	`auto`
shadowBlur	Edge shadow blur	number	-
shadowColor	Edge shadow color	string	-
shadowOffsetX	Edge shadow offset in x direction	number \| string	-
shadowOffsetY	Edge shadow offset in y direction	number \| string	-
shadowType	Edge shadow type	`inner` \| `outer`	`outer`
sourcePort	Connection port at the source end of the edge	string	-
stroke	Edge color	string	`#000`
strokeOpacity	Edge color opacity	number \| string	1
targetPort	Connection port at the target end of the edge	string	-
transform	Transform property allows you to rotate, scale, skew, or translate the given edge	string	-
transformOrigin	The center of rotation and scaling, also known as the transform center	string	-
visibility	Whether the edge is visible	`visible` \| `hidden`	`visible`
zIndex	Edge rendering layer	number	1

PointerEvents

The pointerEvents property controls how graphics respond to interaction events. Refer to MDN documentation.

In short, both stroke and visibility can independently or in combination affect hit testing behavior. Currently supports the following keywords:

auto: Default value, equivalent to visiblepainted
none: Never becomes a target for responding to events
visiblepainted: Responds to events only when the following conditions are met:
- visibility is set to visible, i.e., the graphic is visible
- Triggered in the graphic stroke area while stroke takes a non-none value
visiblestroke: Responds to events only when the following conditions are met:
- visibility is set to visible, i.e., the graphic is visible
- Triggered in the graphic stroke area, not affected by stroke value
visible: Responds to events only when the following conditions are met:
- visibility is set to visible, i.e., the graphic is visible
- Triggered in the graphic stroke area, not affected by stroke value
painted: Responds to events only when the following conditions are met:
- Triggered in the graphic stroke area while stroke takes a non-none value
- Not affected by visibility value
stroke: Responds to events only when the following conditions are met:
- Triggered in the graphic stroke area, not affected by stroke value
- Not affected by visibility value
all: Responds to events as long as entering the graphic stroke area, not affected by stroke or visibility values

Usage Examples:

// Example 1: Only stroke area responds to events
const graph = new Graph({
  edge: {
    style: {
      stroke: '#000',
      lineWidth: 2,
      pointerEvents: 'stroke', // Only stroke responds to events
    },
  },
});

// Example 2: Completely non-responsive to events
const graph = new Graph({
  edge: {
    style: {
      pointerEvents: 'none', // Edge does not respond to any events
    },
  },
});

Cursor

Label Styles

Labels are used to display text information for edges, supporting various style configurations and layout options. Here are common usage scenarios:

Basic Text Label

The simplest text label configuration:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 120,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 60 } },
      { id: 'node2', style: { x: 180, y: 60 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      labelText: 'Edge Label',
      labelFill: '#262626',
      labelFontSize: 12,
      labelPlacement: 'center',
    },
  },
});

graph.render();

Multi-line Text Label

When text is long, you can set automatic line wrapping:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 120,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 60 } },
      { id: 'node2', style: { x: 180, y: 60 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      labelText: 'This is a very long edge label that needs line wrapping',
      labelWordWrap: true,
      labelMaxWidth: '200%',
      labelMaxLines: 2,
      labelTextOverflow: 'ellipsis',
      labelFill: '#434343',
      labelPlacement: 'center',
      labelTextAlign: 'center',
    },
  },
});

graph.render();

Label with Background

Add background to labels for better readability:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 120,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 60 } },
      { id: 'node2', style: { x: 180, y: 60 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      labelText: 'Important Connection',
      labelBackground: true,
      labelBackgroundFill: 'rgba(250, 140, 22, 0.1)',
      labelBackgroundRadius: 6,
      labelPadding: [4, 8],
      labelFill: '#D4380D',
      labelFontWeight: 'bold',
      labelPlacement: 'center',
    },
  },
});

graph.render();

Auto-rotating Label

Labels can automatically rotate to align with edge direction:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 120,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 30 } },
      { id: 'node2', style: { x: 180, y: 90 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      labelText: 'Auto Rotate',
      labelAutoRotate: true, // Auto rotate
      labelFill: '#1890FF',
      labelFontWeight: 'bold',
      labelPlacement: 'center',
    },
  },
});

graph.render();

The following is the complete label style configuration:

Property	Description	Type	Default
label	Whether to show edge label	boolean	true
labelAutoRotate	Whether edge label automatically rotates to align with edge direction	boolean	true
labelCursor	Mouse cursor style when hovering over edge label, options	string	`default`
labelFill	Edge label text color	string	-
labelFontFamily	Edge label font family	string	-
labelFontSize	Edge label font size	number	12
labelFontStyle	Edge label font style	`normal` \| `italic` \| `oblique`	-
labelFontVariant	Edge label font variant	`normal` \| `small-caps` \| string	-
labelFontWeight	Edge label font weight	`normal` \| `bold` \| `bolder` \| `lighter` \| number	-
labelLeading	Line spacing	number	0
labelLetterSpacing	Edge label letter spacing	number \| string	-
labelLineHeight	Edge label line height	number \| string	-
labelMaxLines	Edge label maximum lines	number	1
labelMaxWidth	Edge label maximum width, options	number \| string	`200%`
labelOffsetX	Edge label offset in x direction	number	0
labelOffsetY	Edge label offset in y direction	number	0
labelPadding	Edge label padding	number \| number[]	0
labelPlacement	Edge label position relative to edge, options	string \| number	`center`
labelText	Edge label text content	`string` \| `(datum) => string`	-
labelTextAlign	Edge label text horizontal alignment	`start` \| `center` \| `middle` \| `end` \| `left` \| `right`	`left`
labelTextBaseline	Edge label text baseline	`top` \| `hanging` \| `middle` \| `alphabetic` \| `ideographic` \| `bottom`	-
labelTextDecorationColor	Edge label text decoration line color	string	-
labelTextDecorationLine	Edge label text decoration line	string	-
labelTextDecorationStyle	Edge label text decoration line style	`solid` \| `double` \| `dotted` \| `dashed` \| `wavy`	-
labelTextOverflow	Edge label text overflow handling	`clip` \| `ellipsis` \| string	-
labelTextPath	Edge label text path	Path	-
labelWordWrap	Whether to enable automatic line wrapping for edge labels. When enabled, text exceeding labelMaxWidth will wrap	boolean	false
labelZIndex	Edge label rendering layer	number	0

LabelPlacement

Edge label position relative to the edge, can be set to:

start: Label positioned at the starting point of the edge
center: Label positioned at the center of the edge (default)
end: Label positioned at the ending point of the edge
number: Value range 0-1, representing the specific position ratio of the label on the edge, 0 for start position, 1 for end position

LabelMaxWidth

After enabling automatic line wrapping labelWordWrap, text exceeding this width will wrap:

string: Represents the maximum width defined as a percentage relative to the edge length. For example, 50% means the label width does not exceed half the edge length
number: Represents the maximum width defined in pixels. For example, 100 means the label's maximum width is 100 pixels

For example, setting multi-line label text:

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

Label Background Styles

Label background is used to display the background of edge labels:

Property	Description	Type	Default
labelBackground	Whether to show edge label background	boolean	false
labelBackgroundCursor	Edge label background mouse cursor style, options	string	`default`
labelBackgroundFill	Edge label background fill color	string	-
labelBackgroundFillOpacity	Edge label background opacity	number	1
labelBackgroundHeight	Edge label background height	string \| number	-
labelBackgroundLineDash	Edge label background dash line configuration	number \| string \|(number \| string )[]	-
labelBackgroundLineDashOffset	Edge label background dash line offset	number	-
labelBackgroundLineWidth	Edge label background stroke line width	number	-
labelBackgroundRadius	Edge label background border radius - number: Uniform radius for all corners - number[]: Individual radius for each corner, auto-filled if insufficient	number \| number[]	0
labelBackgroundShadowBlur	Edge label background shadow blur	number	-
labelBackgroundShadowColor	Edge label background shadow color	string	-
labelBackgroundShadowOffsetX	Edge label background shadow X offset	number	-
labelBackgroundShadowOffsetY	Edge label background shadow Y offset	number	-
labelBackgroundStroke	Edge label background stroke color	string	-
labelBackgroundStrokeOpacity	Edge label background stroke opacity	number \| string	1
labelBackgroundVisibility	Edge label background visibility	`visible` \| `hidden`	-
labelBackgroundZIndex	Edge label background rendering layer	number	1

Halo Styles

Halo is an effect displayed around the edge main graphic, usually used for highlighting or indicating special states of the edge.

Basic Halo Effect

Add basic halo effect to edges:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 50 } },
      { id: 'node2', style: { x: 180, y: 50 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      lineWidth: 2,
      halo: true,
      haloStroke: '#1890FF',
      haloLineWidth: 6,
      haloStrokeOpacity: 0.3,
    },
  },
});

graph.render();

The following is the complete halo style configuration:

Property	Description	Type	Default
halo	Whether to show edge halo	boolean	false
haloCursor	Edge halo mouse cursor style, options	string	`default`
haloDraggable	Whether edge halo allows dragging	boolean	true
haloDroppable	Whether edge halo allows receiving dragged elements	boolean	true
haloFillRule	Edge halo fill rule	`nonzero` \| `evenodd`	-
haloFilter	Edge halo filter	string	-
haloLineWidth	Edge halo stroke width	number	3
haloPointerEvents	Whether edge halo responds to pointer events, options	string	`none`
haloStroke	Edge halo stroke color, this property sets the color of the halo around the edge	string	Consistent with main graphic stroke color
haloStrokeOpacity	Edge halo stroke opacity	number	0.25
haloVisibility	Edge halo visibility	`visible` \| `hidden`	`visible`
haloZIndex	Edge halo rendering layer	number	-1

Arrow Styles

Edges support adding arrows at the start and end points to indicate the directionality of the edge.

Basic Arrow

Add basic arrow to the end of the edge:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 50 } },
      { id: 'node2', style: { x: 180, y: 50 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#1890FF',
      lineWidth: 2,
      endArrow: true, // End arrow
      endArrowType: 'vee', // Arrow type
      endArrowSize: 10, // Arrow size
    },
  },
});

graph.render();

Bidirectional Arrows

Add arrows to both ends of the edge:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 50 } },
      { id: 'node2', style: { x: 180, y: 50 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#52C41A',
      lineWidth: 2,
      startArrow: true, // Start arrow
      startArrowType: 'circle',
      startArrowSize: 8,
      endArrow: true, // End arrow
      endArrowType: 'triangle',
      endArrowSize: 10,
    },
  },
});

graph.render();

Custom Arrow Style

Customize arrow color and type:

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 50 } },
      { id: 'node2', style: { x: 180, y: 50 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      stroke: '#722ED1',
      lineWidth: 3,
      endArrow: true,
      endArrowType: 'diamond', // Diamond arrow
      endArrowSize: 12,
      endArrowFill: '#FF4D4F', // Red arrow fill
      endArrowStroke: '#722ED1', // Arrow stroke color
      endArrowStrokeOpacity: 0.8,
    },
  },
});

graph.render();

Start Arrow Style Configuration

Property	Description	Type	Default
startArrow	Whether to show edge start arrow	boolean	false
startArrowCursor	Edge start arrow mouse cursor style, options	string	`default`
startArrowFill	Edge start arrow fill color	string	Default consistent with edge color
startArrowFillOpacity	Edge start arrow fill opacity	number	1
startArrowOffset	Edge start arrow offset	number	0
startArrowSize	Edge start arrow size	number \| [number, number]	10
startArrowStroke	Edge start arrow stroke color	string	Default consistent with edge color
startArrowStrokeOpacity	Edge start arrow stroke opacity	number	1
startArrowType	Edge start arrow type	`triangle` \| `circle` \| `diamond` \| `vee` \| `rect` \| `triangleRect` \| `simple`	`vee`

End Arrow Style Configuration

Property	Description	Type	Default
endArrow	Whether to show edge end arrow	boolean	false
endArrowCursor	Edge end arrow mouse cursor style, options	string	`default`
endArrowFill	Edge end arrow fill color	string	Default consistent with edge color
endArrowFillOpacity	Edge end arrow fill opacity	number	1
endArrowOffset	Edge end arrow offset	number	0
endArrowSize	Edge end arrow size	number \| [number, number]	10
endArrowStroke	Edge end arrow stroke color	string	Default consistent with edge color
endArrowStrokeOpacity	Edge end arrow stroke opacity	number	1
endArrowType	Edge end arrow type	`triangle` \| `circle` \| `diamond` \| `vee` \| `rect` \| `triangleRect` \| `simple`	`vee`

Loop Edge Styles

Loop edges are special edges where the start and end nodes are the same node.

Basic Loop Edge

Create a basic loop edge:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', style: { x: 100, y: 50 } }],
    edges: [{ source: 'node1', target: 'node1' }],
  },
  edge: {
    style: {
      stroke: '#1890FF',
      lineWidth: 2,
      endArrow: true,
      loopPlacement: 'top', // Loop position
      loopDist: 30, // Loop size
    },
  },
});

graph.render();

Multiple Loop Edges

Create multiple loop edges at different positions for the same node:

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

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 120,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1', style: { x: 100, y: 60 } }],
    edges: [
      { id: 'edge1', source: 'node1', target: 'node1' },
      { id: 'edge2', source: 'node1', target: 'node1' },
      { id: 'edge3', source: 'node1', target: 'node1' },
    ],
  },
  edge: {
    style: {
      lineWidth: 2,
      endArrow: true,
      loopPlacement: (datum) => {
        const placements = ['top', 'right', 'bottom'];
        return placements[parseInt(datum.id.slice(-1)) - 1];
      },
      loopDist: 25,
      stroke: (datum) => {
        const colors = ['#1890FF', '#52C41A', '#722ED1'];
        return colors[parseInt(datum.id.slice(-1)) - 1];
      },
    },
  },
});

graph.render();

The following is the complete loop edge style configuration:

Property	Description	Type	Default
loop	Whether to enable loop edges	boolean	true
loopClockwise	Whether to draw the loop clockwise	boolean	true
loopDist	Distance from node edge to loop top, used to specify loop curvature	number	Default to max node size
loopPlacement	Loop edge position	`left` \| `right` \| `top` \| `bottom` \| `left-top` \| `left-bottom` \| `right-top` \| `right-bottom` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right`	`top`

State

The data structure is as follows:

type EdgeState = {
  [state: string]: EdgeStyle;
};

For example, when an edge is in the focus state, you can add a halo with a width of 6 and orange color.

const graph = new Graph({
  edge: {
    state: {
      focus: {
        halo: true,
        haloLineWidth: 6,
        haloStroke: 'orange',
        haloStrokeOpacity: 0.6,
      },
    },
  },
});

The effect is shown in the following image:

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

const graph = new Graph({
  container: 'container',
  width: 300,
  height: 100,
  autoFit: 'center',
  data: {
    nodes: [{ id: 'node1' }, { id: 'node2' }],
    edges: [{ source: 'node1', target: 'node2', states: ['focus'] }],
  },
  edge: {
    state: {
      focus: {
        halo: true,
        haloLineWidth: 6,
        haloStroke: 'orange',
      },
    },
  },
  layout: {
    type: 'grid',
    cols: 2,
  },
});

graph.render();

Animation

Define edge animation effects. Supports the following two configuration methods:

Disable all edge animations

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

Configure stage animations

Stage animations refer to the animation effects when edges enter the canvas, update, or leave the canvas. Currently supported stages include:

enter: Animation when edge enters the canvas
update: Animation when edge updates
exit: Animation when edge leaves the canvas
show: Animation when edge shows from hidden state
hide: Animation when edge hides
collapse: Animation when edge collapses
expand: Animation when edge expands

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

{
  "edge": {
    "animation": {
      "update": [
        {
          "fields": ["stroke"], // Only animate stroke property during update
          "duration": 1000, // Animation duration
          "easing": "linear" // Easing function
        }
      ]
    }
  }
}

You can also use built-in animation effects:

{
  "edge": {
    "animation": {
      "enter": "fade", // Use fade animation
      "update": "path-in", // Use path animation
      "exit": "fade" // Use fade animation
    }
  }
}

You can pass false to disable specific stage animations:

{
  "edge": {
    "animation": {
      "enter": false // Disable edge entrance animation
    }
  }
}

Palette

Define the edge palette, which is a predefined edge color pool that is allocated according to rules and maps colors to the stroke property.

For palette definitions, please refer to Palette.

Property	Description	Type	Default
color	Palette colors. If the palette is registered, you can directly specify its registration name, or accept a color array	string \| string[]	-
field	Specify the grouping field in element data. If not specified, defaults to using id as grouping field	string \| ((datum) => string)	`id`
invert	Whether to invert the palette	boolean	false
type	Specify current palette type. - `group`: Discrete palette - `value`: Continuous palette	`group` \| `value`	`group`

For example, to assign edge colors to a group of data by the direction field, making edges of the same category have the same color:

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

The effect is shown in the following image:

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

const graph = new Graph({
  container: 'container',
  width: 600,
  height: 300,
  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'],
    },
  },
});

graph.render();

You can also use default configuration:

{
  "edge": {
    "palette": "tableau" // tableau is the palette name, colors assigned by ID by default
  }
}

The effect is shown in the following image:

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

const graph = new Graph({
  container: 'container',
  width: 600,
  height: 300,
  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',
  },
});

graph.render();