边通用配置项

本文介绍内置边通用属性配置。

EdgeOptions

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

const graph = new Graph({
  edge: {
    type: 'line', // 边类型
    style: {}, // 边样式
    state: {}, // 状态样式
    palette: {}, // 色板配置
    animation: {}, // 动画配置
  },
});

属性	描述	类型	默认值
type	边类型，内置边类型名称或自定义边的名称	Type	`line`
style	边样式配置，包括颜色、粗细等	Style	-
state	不同状态下的样式配置	State	-
palette	定义边的色板，用于根据不同数据映射颜色	Palette	-
animation	定义边的动画效果	Animation	-

Type

指定边类型，内置边类型名称或自定义边的名称。默认为 line（直线边）。⚠️ 注意：这里决定了主图形的形状。

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

⚠️ 动态配置说明：type 属性同样支持动态配置，可以根据边数据动态选择边类型：

const graph = new Graph({
  edge: {
    // 静态配置
    type: 'line',

    // 动态配置 - 箭头函数形式
    type: (datum) => datum.data.edgeType || 'line',

    // 动态配置 - 普通函数形式（可访问 graph 实例）
    type: function (datum) {
      console.log(this); // graph 实例
      return datum.data.importance > 5 ? 'polyline' : 'line';
    },
  },
});

可选值有：

line：直线边
polyline：折线边
cubic：三次贝塞尔曲线边
cubic-horizontal：水平三次贝塞尔曲线边
cubic-vertical：垂直三次贝塞尔曲线边
quadratic：二次贝塞尔曲线边

Style

定义边的样式，包括颜色、粗细等。

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

⚠️ 动态配置说明：以下所有样式属性都支持动态配置，即可以传入函数来根据边数据动态计算属性值：

const graph = new Graph({
  edge: {
    style: {
      // 静态配置
      stroke: '#1783FF',

      // 动态配置 - 箭头函数形式
      lineWidth: (datum) => (datum.data.isImportant ? 3 : 1),

      // 动态配置 - 普通函数形式（可访问 graph 实例）
      lineDash: function (datum) {
        console.log(this); // graph 实例
        return datum.data.type === 'dashed' ? [5, 5] : [];
      },

      // 嵌套属性也支持动态配置
      labelText: (datum) => `边: ${datum.id}`,
      endArrow: (datum) => datum.data.hasArrow,
    },
  },
});

其中 datum 参数为边数据对象 (EdgeData)，包含边的所有数据信息。

一个完整的边由以下几部分构成：

key ：边的主图形，表示边的主要路径，例如直线、曲线等；
label ：文本标签，通常用于展示边的名称或描述；
badge ：边上的徽标；
halo ：主图形周围展示的光晕效果的图形；
startArrow ：边起始端的箭头；
endArrow ：边结束端的箭头。

以下样式配置将按原子图形依次说明：

主图形样式

主图形是边的核心部分，定义了边的基本路径和外观。以下是常见的配置场景：

基础样式配置

设置边的基本外观：

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  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', // 蓝色边
      lineWidth: 2, // 边宽度
    },
  },
});

graph.render();

虚线样式

创建带虚线样式的边：

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  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], // 虚线样式
      lineDashOffset: 0,
    },
  },
});

graph.render();

阴影效果

为边添加阴影效果：

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

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

以下为完整的主图形样式配置：

属性	描述	类型	默认值
cursor	边鼠标移入样式，配置项	string	`default`
increasedLineWidthForHitTesting	当 lineWidth 较小时，可交互区域也随之变小，有时我们想增大这个区域，让"细线"更容易被拾取到	number	0
lineDash	边虚线样式	number[]	-
lineDashOffset	边虚线偏移量	number	0
lineWidth	边宽度	number	1
opacity	边透明度	number \| string	1
pointerEvents	边如何响应指针事件，配置项	string	`auto`
shadowBlur	边阴影模糊度	number	-
shadowColor	边阴影颜色	string	-
shadowOffsetX	边阴影在 x 轴方向上的偏移量	number \| string	-
shadowOffsetY	边阴影在 y 轴方向上的偏移量	number \| string	-
shadowType	边阴影类型	`inner` \| `outer`	`outer`
sourcePort	边起始连接的连接桩	string	-
stroke	边颜色	string	`#000`
strokeOpacity	边颜色透明度	number \| string	1
targetPort	边终点连接的连接桩	string	-
transform	transform 属性允许你旋转、缩放、倾斜或平移给定边	string	-
transformOrigin	旋转与缩放中心，也称作变换中心	string	-
visibility	边是否可见	`visible` \| `hidden`	`visible`
zIndex	边渲染层级	number	1

PointerEvents

pointerEvents 属性控制图形如何响应交互事件，可参考 MDN 文档。

简而言之，stroke 和 visibility 都可以独立或组合影响拾取判定行为。目前支持以下关键词：

auto：默认值，等同于 visiblepainted
none：永远不会成为响应事件的目标
visiblepainted：满足以下条件才会响应事件：
- visibility 设置为 visible，即图形为可见的
- 在图形描边区域触发同时 stroke 取非 none 的值
visiblestroke：满足以下条件才会响应事件：
- visibility 设置为 visible，即图形为可见的
- 在图形描边区域触发，不受 stroke 取值的影响
visible：满足以下条件才会响应事件：
- visibility 设置为 visible，即图形为可见的
- 在图形描边区域触发，不受 stroke 取值的影响
painted：满足以下条件才会响应事件：
- 在图形描边区域触发同时 stroke 取非 none 的值
- 不受 visibility 取值的影响
stroke：满足以下条件才会响应事件：
- 在图形描边区域触发，不受 stroke 取值的影响
- 不受 visibility 取值的影响
all：只要进入图形的描边区域就会响应事件，不会受 stroke、visibility 的取值影响

使用示例：

// 示例1：只有描边区域响应事件
const graph = new Graph({
  edge: {
    style: {
      stroke: '#000',
      lineWidth: 2,
      pointerEvents: 'stroke', // 只有描边响应事件
    },
  },
});

// 示例2：完全不响应事件
const graph = new Graph({
  edge: {
    style: {
      pointerEvents: 'none', // 边不响应任何事件
    },
  },
});

Cursor

标签样式

标签用于显示边的文本信息，支持多种样式配置和布局方式。以下是常见的使用场景：

基础文本标签

最简单的文本标签配置：

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

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

graph.render();

多行文本标签

当文本较长时，可以设置自动换行：

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 120,
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 60 } },
      { id: 'node2', style: { x: 180, y: 60 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      labelText: '这是一个很长的边标签需要换行显示',
      labelWordWrap: true,
      labelMaxWidth: '200%',
      labelMaxLines: 2,
      labelTextOverflow: 'ellipsis',
      labelFill: '#434343',
      labelPlacement: 'center',
      labelTextAlign: 'center',
    },
  },
});

graph.render();

带背景的标签

为标签添加背景，提高可读性：

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

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

graph.render();

自动旋转标签

标签可以自动旋转以保持与边方向一致：

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

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

graph.render();

以下为完整的标签样式配置：

属性	描述	类型	默认值
label	边标签是否显示	boolean	true
labelAutoRotate	边标签是否自动旋转，保持与边的方向一致	boolean	true
labelCursor	鼠标移入边标签时显示的样式，配置项	string	`default`
labelFill	边标签文字颜色	string	-
labelFontFamily	边标签字体族	string	-
labelFontSize	边标签字体大小	number	12
labelFontStyle	边标签字体样式	`normal` \| `italic` \| `oblique`	-
labelFontVariant	边标签字体变种	`normal` \| `small-caps` \| string	-
labelFontWeight	边标签字体粗细	`normal` \| `bold` \| `bolder` \| `lighter` \| number	-
labelLeading	行间距	number	0
labelLetterSpacing	边标签字间距	number \| string	-
labelLineHeight	边标签行高	number \| string	-
labelMaxLines	边标签最大行数	number	1
labelMaxWidth	边标签最大宽度，配置项	number \| string	`200%`
labelOffsetX	边标签在 x 轴方向上的偏移量	number	0
labelOffsetY	边标签在 y 轴方向上的偏移量	number	0
labelPadding	边标签内边距	number \| number[]	0
labelPlacement	边标签相对于边的位置，配置项	string \| number	`center`
labelText	边标签文字内容	`string` \| `(datum) => string`	-
labelTextAlign	边标签文本水平对齐方式	`start` \| `center` \| `middle` \| `end` \| `left` \| `right`	`left`
labelTextBaseline	边标签文本基线	`top` \| `hanging` \| `middle` \| `alphabetic` \| `ideographic` \| `bottom`	-
labelTextDecorationColor	边标签文本装饰线颜色	string	-
labelTextDecorationLine	边标签文本装饰线	string	-
labelTextDecorationStyle	边标签文本装饰线样式	`solid` \| `double` \| `dotted` \| `dashed` \| `wavy`	-
labelTextOverflow	边标签文本溢出处理方式	`clip` \| `ellipsis` \| string	-
labelTextPath	边标签文本路径	Path	-
labelWordWrap	边标签是否开启自动折行。开启 labelWordWrap 后，超出 labelMaxWidth 的部分自动换行	boolean	false
labelZIndex	边标签渲染层级	number	0

LabelPlacement

边标签相对于边的位置，可以设置为：

start：标签位于边的起始位置
center：标签位于边的中心位置（默认）
end：标签位于边的结束位置
number：取值范围为 0-1，表示标签在边上的具体位置比例，0 为起始位置，1 为结束位置

LabelMaxWidth

开启自动折行 labelWordWrap 后，超出该宽度则换行:

string: 表示以相对于边长度的百分比形式定义最大宽度。例如 50% 表示标签宽度不超过边长度的一半
number: 表示以像素值为单位定义最大宽度。例如 100 表示标签的最大宽度为 100 像素

比如，设置多行标签文字：

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

标签背景样式

标签背景用于显示边标签的背景：

属性	描述	类型	默认值
labelBackground	边标签背景是否显示	boolean	false
labelBackgroundCursor	边标签背景鼠标移入样式，配置项	string	`default`
labelBackgroundFill	边标签背景填充色	string	-
labelBackgroundFillOpacity	边标签背景透明度	number	1
labelBackgroundHeight	边标签背景高度	string \| number	-
labelBackgroundLineDash	边标签背景虚线配置	number \| string \|(number \| string )[]	-
labelBackgroundLineDashOffset	边标签背景虚线偏移量	number	-
labelBackgroundLineWidth	边标签背景描边线宽	number	-
labelBackgroundRadius	边标签背景圆角半径 - number: 统一设置四个圆角半径 - number[]: 分别设置四个圆角半径，不足则自动补充	number \| number[]	0
labelBackgroundShadowBlur	边标签背景阴影模糊程度	number	-
labelBackgroundShadowColor	边标签背景阴影颜色	string	-
labelBackgroundShadowOffsetX	边标签背景阴影 X 方向偏移	number	-
labelBackgroundShadowOffsetY	边标签背景阴影 Y 方向偏移	number	-
labelBackgroundStroke	边标签背景描边颜色	string	-
labelBackgroundStrokeOpacity	边标签背景描边透明度	number \| string	1
labelBackgroundVisibility	边标签背景是否可见	`visible` \| `hidden`	-
labelBackgroundZIndex	边标签背景渲染层级	number	1

光晕样式

光晕是围绕边主图形显示的效果，通常用于高亮显示或表示边的特殊状态。

基础光晕效果

为边添加基本的光晕效果：

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

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

以下为完整的光晕样式配置：

属性	描述	类型	默认值
halo	边光晕是否显示	boolean	false
haloCursor	边光晕鼠标移入样式，配置项	string	`default`
haloDraggable	边光晕是否允许拖拽	boolean	true
haloDroppable	边光晕是否允许接收被拖拽的元素	boolean	true
haloFillRule	边光晕填充规则	`nonzero` \| `evenodd`	-
haloFilter	边光晕滤镜	string	-
haloLineWidth	边光晕描边宽度	number	3
haloPointerEvents	边光晕效果是否响应指针事件，配置项	string	`none`
haloStroke	边光晕描边色，此属性用于设置边周围光晕的颜色	string	与主图形的描边色 `stroke` 一致
haloStrokeOpacity	边光晕描边色透明度	number	0.25
haloVisibility	边光晕可见性	`visible` \| `hidden`	`visible`
haloZIndex	边光晕渲染层级	number	-1

箭头样式

边支持在起始端和结束端添加箭头，用于表示边的方向性。

基础箭头

为边的结束端添加基本箭头：

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  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, // 结束端箭头
      endArrowType: 'vee', // 箭头类型
      endArrowSize: 10, // 箭头大小
    },
  },
});

graph.render();

双向箭头

为边的两端都添加箭头：

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  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, // 起始端箭头
      startArrowType: 'circle',
      startArrowSize: 8,
      endArrow: true, // 结束端箭头
      endArrowType: 'triangle',
      endArrowSize: 10,
    },
  },
});

graph.render();

自定义箭头样式

自定义箭头的颜色和类型：

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  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', // 菱形箭头
      endArrowSize: 12,
      endArrowFill: '#FF4D4F', // 红色箭头填充
      endArrowStroke: '#722ED1', // 箭头描边颜色
      endArrowStrokeOpacity: 0.8,
    },
  },
});

graph.render();

起始箭头样式配置

属性	描述	类型	默认值
startArrow	边起始箭头是否显示	boolean	false
startArrowCursor	边起始箭头鼠标移入样式，配置项	string	`default`
startArrowFill	边起始箭头填充颜色	string	默认与边的颜色一致
startArrowFillOpacity	边起始箭头填充透明度	number	1
startArrowOffset	边起始箭头的偏移量	number	0
startArrowSize	边起始箭头大小	number \| [number, number]	10
startArrowStroke	边起始箭头描边颜色	string	默认与边的颜色一致
startArrowStrokeOpacity	边起始箭头描边透明度	number	1
startArrowType	边起始箭头类型	`triangle` \| `circle` \| `diamond` \| `vee` \| `rect` \| `triangleRect` \| `simple`	`vee`

结束箭头样式配置

属性	描述	类型	默认值
endArrow	边结束箭头是否显示	boolean	false
endArrowCursor	边结束箭头鼠标移入样式，配置项	string	`default`
endArrowFill	边结束箭头填充颜色	string	默认与边的颜色一致
endArrowFillOpacity	边结束箭头填充透明度	number	1
endArrowOffset	边结束箭头的偏移量	number	0
endArrowSize	边结束箭头大小	number \| [number, number]	10
endArrowStroke	边结束箭头描边颜色	string	默认与边的颜色一致
endArrowStrokeOpacity	边结束箭头描边透明度	number	1
endArrowType	边结束箭头类型	`triangle` \| `circle` \| `diamond` \| `vee` \| `rect` \| `triangleRect` \| `simple`	`vee`

自环边样式

自环边是指起始节点和结束节点为同一个节点的特殊边。

基础自环边

创建基本的自环边：

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

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

graph.render();

多个自环边

为同一节点创建多个不同位置的自环边：

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

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

以下为完整的自环边样式配置：

属性	描述	类型	默认值
loop	是否启用自环边	boolean	true
loopClockwise	指定是否顺时针绘制环	boolean	true
loopDist	从节点边缘到自环顶部的距离，用于指定自环的曲率	number	默认为节点尺寸的最大值
loopPlacement	自环边的位置	`left` \| `right` \| `top` \| `bottom` \| `left-top` \| `left-bottom` \| `right-top` \| `right-bottom` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right`	`top`

State

在一些交互行为中，比如点击选中一个边或鼠标悬停激活一个边，仅仅是在该元素做了某些状态的标识。为了将这些状态反应到终端用户所见的视觉空间中，我们需要为不同的状态设置不同的图元素样式，以响应该图元素状态的变化。

G6 提供了几种内置的状态，包括选中（selected）、高亮（highlight）、激活（active）、不活跃（inactive）和禁用（disabled）。此外，它还支持自定义状态，以满足更特定的需求。对于每个状态，开发者可以定义一套样式规则，这些规则会覆盖元素的默认样式。

数据结构如下：

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

例如，当边处于 focus 状态时，可以为其添加一个宽度为 6 且颜色为橙色的光晕。

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

效果如下图所示：

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

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

定义边的动画效果，支持下列两种配置方式：

关闭边全部动画

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

配置阶段动画

阶段动画是指边在进入画布、更新、离开画布时的动画效果。目前支持的阶段包括：

enter: 边进入画布时的动画
update: 边更新时的动画
exit: 边离开画布时的动画
show: 边从隐藏状态显示时的动画
hide: 边隐藏时的动画
collapse: 边收起时的动画
expand: 边展开时的动画

你可以参考动画范式使用动画语法来配置边，如：

{
  "edge": {
    "animation": {
      "update": [
        {
          "fields": ["stroke"], // 更新时只对 stroke 属性进行动画
          "duration": 1000, // 动画持续时间
          "easing": "linear" // 缓动函数
        }
      ]
    }
  }
}

也可以使用内置的动画效果：

{
  "edge": {
    "animation": {
      "enter": "fade", // 使用渐变动画
      "update": "path-in", // 使用路径动画
      "exit": "fade" // 使用渐变动画
    }
  }
}

你可以传入 false 来关闭特定阶段的动画：

{
  "edge": {
    "animation": {
      "enter": false // 关闭边入场动画
    }
  }
}

Palette

定义边的色板，即预定义边颜色池，并根据规则进行分配，将颜色映射到 stroke 属性。

有关色板的定义，请参考色板。

属性	描述	类型	默认值
color	色板颜色。如果色板注册过，可以直接指定其注册名，也接受一个颜色数组	string \| string[]	-
field	指定元素数据中的分组字段。若不指定，默认取 id 作为分组字段	string \| ((datum) => string)	`id`
invert	是否反转色板	boolean	false
type	指定当前色板类型。 - `group`: 离散色板 - `value`: 连续色板	`group` \| `value`	`group`

如将一组数据按 direction 字段分配边颜色，使得同类别的边颜色相同：

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

效果如下图所示：

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();

也可以使用默认配置：

{
  "edge": {
    "palette": "tableau" // tableau 为色板名，默认根据 ID 分配颜色
  }
}

效果如下图所示：

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();

本文介绍内置边通用属性配置。

EdgeOptions

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

const graph = new Graph({
  edge: {
    type: 'line', // 边类型
    style: {}, // 边样式
    state: {}, // 状态样式
    palette: {}, // 色板配置
    animation: {}, // 动画配置
  },
});

属性	描述	类型	默认值
type	边类型，内置边类型名称或自定义边的名称	Type	`line`
style	边样式配置，包括颜色、粗细等	Style	-
state	不同状态下的样式配置	State	-
palette	定义边的色板，用于根据不同数据映射颜色	Palette	-
animation	定义边的动画效果	Animation	-

Type

指定边类型，内置边类型名称或自定义边的名称。默认为 line（直线边）。⚠️ 注意：这里决定了主图形的形状。

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

⚠️ 动态配置说明：type 属性同样支持动态配置，可以根据边数据动态选择边类型：

const graph = new Graph({
  edge: {
    // 静态配置
    type: 'line',

    // 动态配置 - 箭头函数形式
    type: (datum) => datum.data.edgeType || 'line',

    // 动态配置 - 普通函数形式（可访问 graph 实例）
    type: function (datum) {
      console.log(this); // graph 实例
      return datum.data.importance > 5 ? 'polyline' : 'line';
    },
  },
});

可选值有：

line：直线边
polyline：折线边
cubic：三次贝塞尔曲线边
cubic-horizontal：水平三次贝塞尔曲线边
cubic-vertical：垂直三次贝塞尔曲线边
quadratic：二次贝塞尔曲线边

Style

定义边的样式，包括颜色、粗细等。

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

⚠️ 动态配置说明：以下所有样式属性都支持动态配置，即可以传入函数来根据边数据动态计算属性值：

const graph = new Graph({
  edge: {
    style: {
      // 静态配置
      stroke: '#1783FF',

      // 动态配置 - 箭头函数形式
      lineWidth: (datum) => (datum.data.isImportant ? 3 : 1),

      // 动态配置 - 普通函数形式（可访问 graph 实例）
      lineDash: function (datum) {
        console.log(this); // graph 实例
        return datum.data.type === 'dashed' ? [5, 5] : [];
      },

      // 嵌套属性也支持动态配置
      labelText: (datum) => `边: ${datum.id}`,
      endArrow: (datum) => datum.data.hasArrow,
    },
  },
});

其中 datum 参数为边数据对象 (EdgeData)，包含边的所有数据信息。

一个完整的边由以下几部分构成：

key ：边的主图形，表示边的主要路径，例如直线、曲线等；
label ：文本标签，通常用于展示边的名称或描述；
badge ：边上的徽标；
halo ：主图形周围展示的光晕效果的图形；
startArrow ：边起始端的箭头；
endArrow ：边结束端的箭头。

以下样式配置将按原子图形依次说明：

主图形样式

主图形是边的核心部分，定义了边的基本路径和外观。以下是常见的配置场景：

基础样式配置

设置边的基本外观：

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  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', // 蓝色边
      lineWidth: 2, // 边宽度
    },
  },
});

graph.render();

虚线样式

创建带虚线样式的边：

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  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], // 虚线样式
      lineDashOffset: 0,
    },
  },
});

graph.render();

阴影效果

为边添加阴影效果：

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

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

以下为完整的主图形样式配置：

属性	描述	类型	默认值
cursor	边鼠标移入样式，配置项	string	`default`
increasedLineWidthForHitTesting	当 lineWidth 较小时，可交互区域也随之变小，有时我们想增大这个区域，让"细线"更容易被拾取到	number	0
lineDash	边虚线样式	number[]	-
lineDashOffset	边虚线偏移量	number	0
lineWidth	边宽度	number	1
opacity	边透明度	number \| string	1
pointerEvents	边如何响应指针事件，配置项	string	`auto`
shadowBlur	边阴影模糊度	number	-
shadowColor	边阴影颜色	string	-
shadowOffsetX	边阴影在 x 轴方向上的偏移量	number \| string	-
shadowOffsetY	边阴影在 y 轴方向上的偏移量	number \| string	-
shadowType	边阴影类型	`inner` \| `outer`	`outer`
sourcePort	边起始连接的连接桩	string	-
stroke	边颜色	string	`#000`
strokeOpacity	边颜色透明度	number \| string	1
targetPort	边终点连接的连接桩	string	-
transform	transform 属性允许你旋转、缩放、倾斜或平移给定边	string	-
transformOrigin	旋转与缩放中心，也称作变换中心	string	-
visibility	边是否可见	`visible` \| `hidden`	`visible`
zIndex	边渲染层级	number	1

PointerEvents

pointerEvents 属性控制图形如何响应交互事件，可参考 MDN 文档。

简而言之，stroke 和 visibility 都可以独立或组合影响拾取判定行为。目前支持以下关键词：

auto：默认值，等同于 visiblepainted
none：永远不会成为响应事件的目标
visiblepainted：满足以下条件才会响应事件：
- visibility 设置为 visible，即图形为可见的
- 在图形描边区域触发同时 stroke 取非 none 的值
visiblestroke：满足以下条件才会响应事件：
- visibility 设置为 visible，即图形为可见的
- 在图形描边区域触发，不受 stroke 取值的影响
visible：满足以下条件才会响应事件：
- visibility 设置为 visible，即图形为可见的
- 在图形描边区域触发，不受 stroke 取值的影响
painted：满足以下条件才会响应事件：
- 在图形描边区域触发同时 stroke 取非 none 的值
- 不受 visibility 取值的影响
stroke：满足以下条件才会响应事件：
- 在图形描边区域触发，不受 stroke 取值的影响
- 不受 visibility 取值的影响
all：只要进入图形的描边区域就会响应事件，不会受 stroke、visibility 的取值影响

使用示例：

// 示例1：只有描边区域响应事件
const graph = new Graph({
  edge: {
    style: {
      stroke: '#000',
      lineWidth: 2,
      pointerEvents: 'stroke', // 只有描边响应事件
    },
  },
});

// 示例2：完全不响应事件
const graph = new Graph({
  edge: {
    style: {
      pointerEvents: 'none', // 边不响应任何事件
    },
  },
});

Cursor

标签样式

标签用于显示边的文本信息，支持多种样式配置和布局方式。以下是常见的使用场景：

基础文本标签

最简单的文本标签配置：

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

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

graph.render();

多行文本标签

当文本较长时，可以设置自动换行：

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 120,
  data: {
    nodes: [
      { id: 'node1', style: { x: 60, y: 60 } },
      { id: 'node2', style: { x: 180, y: 60 } },
    ],
    edges: [{ source: 'node1', target: 'node2' }],
  },
  edge: {
    style: {
      labelText: '这是一个很长的边标签需要换行显示',
      labelWordWrap: true,
      labelMaxWidth: '200%',
      labelMaxLines: 2,
      labelTextOverflow: 'ellipsis',
      labelFill: '#434343',
      labelPlacement: 'center',
      labelTextAlign: 'center',
    },
  },
});

graph.render();

带背景的标签

为标签添加背景，提高可读性：

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

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

graph.render();

自动旋转标签

标签可以自动旋转以保持与边方向一致：

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

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

graph.render();

以下为完整的标签样式配置：

属性	描述	类型	默认值
label	边标签是否显示	boolean	true
labelAutoRotate	边标签是否自动旋转，保持与边的方向一致	boolean	true
labelCursor	鼠标移入边标签时显示的样式，配置项	string	`default`
labelFill	边标签文字颜色	string	-
labelFontFamily	边标签字体族	string	-
labelFontSize	边标签字体大小	number	12
labelFontStyle	边标签字体样式	`normal` \| `italic` \| `oblique`	-
labelFontVariant	边标签字体变种	`normal` \| `small-caps` \| string	-
labelFontWeight	边标签字体粗细	`normal` \| `bold` \| `bolder` \| `lighter` \| number	-
labelLeading	行间距	number	0
labelLetterSpacing	边标签字间距	number \| string	-
labelLineHeight	边标签行高	number \| string	-
labelMaxLines	边标签最大行数	number	1
labelMaxWidth	边标签最大宽度，配置项	number \| string	`200%`
labelOffsetX	边标签在 x 轴方向上的偏移量	number	0
labelOffsetY	边标签在 y 轴方向上的偏移量	number	0
labelPadding	边标签内边距	number \| number[]	0
labelPlacement	边标签相对于边的位置，配置项	string \| number	`center`
labelText	边标签文字内容	`string` \| `(datum) => string`	-
labelTextAlign	边标签文本水平对齐方式	`start` \| `center` \| `middle` \| `end` \| `left` \| `right`	`left`
labelTextBaseline	边标签文本基线	`top` \| `hanging` \| `middle` \| `alphabetic` \| `ideographic` \| `bottom`	-
labelTextDecorationColor	边标签文本装饰线颜色	string	-
labelTextDecorationLine	边标签文本装饰线	string	-
labelTextDecorationStyle	边标签文本装饰线样式	`solid` \| `double` \| `dotted` \| `dashed` \| `wavy`	-
labelTextOverflow	边标签文本溢出处理方式	`clip` \| `ellipsis` \| string	-
labelTextPath	边标签文本路径	Path	-
labelWordWrap	边标签是否开启自动折行。开启 labelWordWrap 后，超出 labelMaxWidth 的部分自动换行	boolean	false
labelZIndex	边标签渲染层级	number	0

LabelPlacement

边标签相对于边的位置，可以设置为：

start：标签位于边的起始位置
center：标签位于边的中心位置（默认）
end：标签位于边的结束位置
number：取值范围为 0-1，表示标签在边上的具体位置比例，0 为起始位置，1 为结束位置

LabelMaxWidth

开启自动折行 labelWordWrap 后，超出该宽度则换行:

string: 表示以相对于边长度的百分比形式定义最大宽度。例如 50% 表示标签宽度不超过边长度的一半
number: 表示以像素值为单位定义最大宽度。例如 100 表示标签的最大宽度为 100 像素

比如，设置多行标签文字：

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

标签背景样式

标签背景用于显示边标签的背景：

属性	描述	类型	默认值
labelBackground	边标签背景是否显示	boolean	false
labelBackgroundCursor	边标签背景鼠标移入样式，配置项	string	`default`
labelBackgroundFill	边标签背景填充色	string	-
labelBackgroundFillOpacity	边标签背景透明度	number	1
labelBackgroundHeight	边标签背景高度	string \| number	-
labelBackgroundLineDash	边标签背景虚线配置	number \| string \|(number \| string )[]	-
labelBackgroundLineDashOffset	边标签背景虚线偏移量	number	-
labelBackgroundLineWidth	边标签背景描边线宽	number	-
labelBackgroundRadius	边标签背景圆角半径 - number: 统一设置四个圆角半径 - number[]: 分别设置四个圆角半径，不足则自动补充	number \| number[]	0
labelBackgroundShadowBlur	边标签背景阴影模糊程度	number	-
labelBackgroundShadowColor	边标签背景阴影颜色	string	-
labelBackgroundShadowOffsetX	边标签背景阴影 X 方向偏移	number	-
labelBackgroundShadowOffsetY	边标签背景阴影 Y 方向偏移	number	-
labelBackgroundStroke	边标签背景描边颜色	string	-
labelBackgroundStrokeOpacity	边标签背景描边透明度	number \| string	1
labelBackgroundVisibility	边标签背景是否可见	`visible` \| `hidden`	-
labelBackgroundZIndex	边标签背景渲染层级	number	1

光晕样式

光晕是围绕边主图形显示的效果，通常用于高亮显示或表示边的特殊状态。

基础光晕效果

为边添加基本的光晕效果：

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

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

以下为完整的光晕样式配置：

属性	描述	类型	默认值
halo	边光晕是否显示	boolean	false
haloCursor	边光晕鼠标移入样式，配置项	string	`default`
haloDraggable	边光晕是否允许拖拽	boolean	true
haloDroppable	边光晕是否允许接收被拖拽的元素	boolean	true
haloFillRule	边光晕填充规则	`nonzero` \| `evenodd`	-
haloFilter	边光晕滤镜	string	-
haloLineWidth	边光晕描边宽度	number	3
haloPointerEvents	边光晕效果是否响应指针事件，配置项	string	`none`
haloStroke	边光晕描边色，此属性用于设置边周围光晕的颜色	string	与主图形的描边色 `stroke` 一致
haloStrokeOpacity	边光晕描边色透明度	number	0.25
haloVisibility	边光晕可见性	`visible` \| `hidden`	`visible`
haloZIndex	边光晕渲染层级	number	-1

箭头样式

边支持在起始端和结束端添加箭头，用于表示边的方向性。

基础箭头

为边的结束端添加基本箭头：

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  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, // 结束端箭头
      endArrowType: 'vee', // 箭头类型
      endArrowSize: 10, // 箭头大小
    },
  },
});

graph.render();

双向箭头

为边的两端都添加箭头：

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  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, // 起始端箭头
      startArrowType: 'circle',
      startArrowSize: 8,
      endArrow: true, // 结束端箭头
      endArrowType: 'triangle',
      endArrowSize: 10,
    },
  },
});

graph.render();

自定义箭头样式

自定义箭头的颜色和类型：

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

const graph = new Graph({
  container: 'container',
  width: 240,
  height: 100,
  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', // 菱形箭头
      endArrowSize: 12,
      endArrowFill: '#FF4D4F', // 红色箭头填充
      endArrowStroke: '#722ED1', // 箭头描边颜色
      endArrowStrokeOpacity: 0.8,
    },
  },
});

graph.render();

起始箭头样式配置

属性	描述	类型	默认值
startArrow	边起始箭头是否显示	boolean	false
startArrowCursor	边起始箭头鼠标移入样式，配置项	string	`default`
startArrowFill	边起始箭头填充颜色	string	默认与边的颜色一致
startArrowFillOpacity	边起始箭头填充透明度	number	1
startArrowOffset	边起始箭头的偏移量	number	0
startArrowSize	边起始箭头大小	number \| [number, number]	10
startArrowStroke	边起始箭头描边颜色	string	默认与边的颜色一致
startArrowStrokeOpacity	边起始箭头描边透明度	number	1
startArrowType	边起始箭头类型	`triangle` \| `circle` \| `diamond` \| `vee` \| `rect` \| `triangleRect` \| `simple`	`vee`

结束箭头样式配置

属性	描述	类型	默认值
endArrow	边结束箭头是否显示	boolean	false
endArrowCursor	边结束箭头鼠标移入样式，配置项	string	`default`
endArrowFill	边结束箭头填充颜色	string	默认与边的颜色一致
endArrowFillOpacity	边结束箭头填充透明度	number	1
endArrowOffset	边结束箭头的偏移量	number	0
endArrowSize	边结束箭头大小	number \| [number, number]	10
endArrowStroke	边结束箭头描边颜色	string	默认与边的颜色一致
endArrowStrokeOpacity	边结束箭头描边透明度	number	1
endArrowType	边结束箭头类型	`triangle` \| `circle` \| `diamond` \| `vee` \| `rect` \| `triangleRect` \| `simple`	`vee`

自环边样式

自环边是指起始节点和结束节点为同一个节点的特殊边。

基础自环边

创建基本的自环边：

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

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

graph.render();

多个自环边

为同一节点创建多个不同位置的自环边：

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

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

以下为完整的自环边样式配置：

属性	描述	类型	默认值
loop	是否启用自环边	boolean	true
loopClockwise	指定是否顺时针绘制环	boolean	true
loopDist	从节点边缘到自环顶部的距离，用于指定自环的曲率	number	默认为节点尺寸的最大值
loopPlacement	自环边的位置	`left` \| `right` \| `top` \| `bottom` \| `left-top` \| `left-bottom` \| `right-top` \| `right-bottom` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right`	`top`

State

数据结构如下：

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

例如，当边处于 focus 状态时，可以为其添加一个宽度为 6 且颜色为橙色的光晕。

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

效果如下图所示：

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

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

定义边的动画效果，支持下列两种配置方式：

关闭边全部动画

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

配置阶段动画

阶段动画是指边在进入画布、更新、离开画布时的动画效果。目前支持的阶段包括：

enter: 边进入画布时的动画
update: 边更新时的动画
exit: 边离开画布时的动画
show: 边从隐藏状态显示时的动画
hide: 边隐藏时的动画
collapse: 边收起时的动画
expand: 边展开时的动画

你可以参考动画范式使用动画语法来配置边，如：

{
  "edge": {
    "animation": {
      "update": [
        {
          "fields": ["stroke"], // 更新时只对 stroke 属性进行动画
          "duration": 1000, // 动画持续时间
          "easing": "linear" // 缓动函数
        }
      ]
    }
  }
}

也可以使用内置的动画效果：

{
  "edge": {
    "animation": {
      "enter": "fade", // 使用渐变动画
      "update": "path-in", // 使用路径动画
      "exit": "fade" // 使用渐变动画
    }
  }
}

你可以传入 false 来关闭特定阶段的动画：

{
  "edge": {
    "animation": {
      "enter": false // 关闭边入场动画
    }
  }
}

Palette

定义边的色板，即预定义边颜色池，并根据规则进行分配，将颜色映射到 stroke 属性。

有关色板的定义，请参考色板。

属性	描述	类型	默认值
color	色板颜色。如果色板注册过，可以直接指定其注册名，也接受一个颜色数组	string \| string[]	-
field	指定元素数据中的分组字段。若不指定，默认取 id 作为分组字段	string \| ((datum) => string)	`id`
invert	是否反转色板	boolean	false
type	指定当前色板类型。 - `group`: 离散色板 - `value`: 连续色板	`group` \| `value`	`group`

如将一组数据按 direction 字段分配边颜色，使得同类别的边颜色相同：

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

效果如下图所示：

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();

也可以使用默认配置：

{
  "edge": {
    "palette": "tableau" // tableau 为色板名，默认根据 ID 分配颜色
  }
}

效果如下图所示：

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();