前言
上篇文章简单介绍了一下g6的使用，今天继续讲g6的元素边。g6有内置的几种边，可以实现一些基础的图，如果内置边不满足需求，还可以自定义边。
边
在 AntV G6 中，边（Edge）是图表中的元素，用于连接节点（Node）表示节点之间的关系。边可以具有多种属性，以定义它们的样式、标签和其他特性。以下是一些常见的边属性：
- id（必需属性）：边的唯一标识符，用于在图表中标识边。
- source（必需属性）：表示边的起始节点的 ID。边从该节点开始。
- target（必需属性）：表示边的目标节点的 ID。边指向该节点。
- label：边的文本标签，用于描述边的含义或关系。
- style：边的样式，可以定义颜色、线宽、线型等属性。
- type：指定边的类型，可以是内置边的类型名称，也可以是自定义边的名称。默认为 'line'
- labelCfg：用于定义边的文本标签的配置，可以设置文本的字体、位置等属性。
- sourceAnchor：边的起始节点上的锚点的索引值。
- targetAnchor：边的终止节点上的锚点的索引值。
// 创建一个图表实例 const container = document.getElementById('container'); const width = container.scrollWidth; const height = container.scrollHeight || 500; const graph = new G6.Graph({ container: container, width: width, height: height, }); // 定义节点和边的数据 const data = { nodes: [ { id: 'node1', x: 100, y: 100, label: 'Node 1' }, { id: 'node2', x: 300, y: 100, label: 'Node 2' }, ], edges: [ { id: 'edge1', source: 'node1', target: 'node2', label: 'Edge 1', style: { lineWidth: 2, color: '#000', labelCfg: { autoRotate: true, refY: 5, style: { fill: '#000' } }, endArrow: { fill: '#000', path: G6.Arrow.triangle(10, 12, 25), d: 25 } } }, ], };
内置边
AntV G6 提供了一些内置的边类型，这些内置边类型具有不同的样式和行为，可以用于创建不同类型的关系图。以下是一些常见的内置边类型以及如何使用它们的示例：
- 直线边（'line'）：这是默认的边类型，表示直线边。使用
shape: 'line'来指定边的类型。
const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, defaultEdge: { type: 'line', // 其他配置 }, });
- 曲线边（'cubic'）：表示曲线形状的边。使用
shape: 'cubic'来指定边的类型。
const graph = new G6.Graph({ container: 'cubic', width: 800, height: 600, defaultEdge: { type: 'polyline', // 其他配置 }, });
- 弧线边（'quadratic'）：表示弧线形状的边。使用
shape: 'quadratic'来指定边的类型。
const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, defaultEdge: { type: 'quadratic', // 其他配置 }, });
- 折线边（'polyline'）：表示折线形状的边。使用
shape: 'polyline'来指定边的类型。
const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, defaultEdge: { type: 'polyline', // 其他配置 }, });
- Loop 边（'loop'）：表示自环边，即连接节点自身的边。使用 shape: 'loop' 来指定边的类型。
const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, defaultEdge: { type: 'loop', // 其他配置 }, });
自定义边
下面简单实现一个自定义边，在边的中间画了一个矩形，添加了动画，然后修改了选中、悬停的样式。
import G6 from "@antv/g6"; export const registerEdges = (name:string, options?:any)=>{ G6.registerEdge( name, { afterDraw(cfg:any, group:any) { const {startPoint, endPoint} = cfg const shape = group.get('children')[0]; const mx = (startPoint?.x + endPoint.x)/2; const my = (startPoint?.y + endPoint.y)/2; const circle = group.addShape('circle', { attrs: { x: startPoint.x, y: startPoint.y, fill: '#1890ff', r: 3, }, name: 'circle-shape', }); // animation for the red circle circle.animate( (ratio:any) => { const tmpPoint = shape.getPoint(ratio); return { x: tmpPoint.x, y: tmpPoint.y, }; }, { repeat: true, // Whether executes the animation repeatly duration: 3000, // the duration for executing once }, ); group.addShape('rect', { attrs: { width: 10, height: 10, fill: '#f00', // x 和 y 分别减去 width / 2 与 height / 2，使矩形中心在 midPoint 上 x: mx, y: my, }, name: 'mid-point-edge-rect', // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 }); }, setState(name, value, item:any) { const group = item.getContainer(); const shape = group.get('children')[0]; // 顺序根据 draw 时确定 if (name === 'active') { if (value) { shape.attr('stroke', 'red'); } else { shape.attr('stroke', '#333'); } } if (name === 'selected') { if (value) { shape.attr('lineWidth', 3); } else { shape.attr('lineWidth', 2); } } }, }, 'line' ); }
可以根据自己需求做调整，自定义边的功能还是比较强，可以增加边的可视化效果，以便更好地展示和交互。可能在图表或网络图的可视化中会使用这种类型的边，以强调边的起点、中点和状态。
