antv/g6 元素之边、自定义边

前言

上篇文章简单介绍了一下g6的使用，今天继续讲g6的元素边。g6有内置的几种边，可以实现一些基础的图，如果内置边不满足需求，还可以自定义边。

边

在 AntV G6 中，边（Edge）是图表中的元素，用于连接节点（Node）表示节点之间的关系。边可以具有多种属性，以定义它们的样式、标签和其他特性。以下是一些常见的边属性：

1. id（必需属性）：边的唯一标识符，用于在图表中标识边。

2. source（必需属性）：表示边的起始节点的 ID。边从该节点开始。

3. target（必需属性）：表示边的目标节点的 ID。边指向该节点。

4. label：边的文本标签，用于描述边的含义或关系。

5. style：边的样式，可以定义颜色、线宽、线型等属性。

6. type：指定边的类型，可以是内置边的类型名称，也可以是自定义边的名称。默认为 ‘line’

7. labelCfg：用于定义边的文本标签的配置，可以设置文本的字体、位置等属性。

8. sourceAnchor：边的起始节点上的锚点的索引值。

9. 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 提供了一些内置的边类型，这些内置边类型具有不同的样式和行为，可以用于创建不同类型的关系图。以下是一些常见的内置边类型以及如何使用它们的示例：

1. 直线边（‘line’）：这是默认的边类型，表示直线边。使用 shape: 'line' 来指定边的类型。

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultEdge: {
    type: 'line',
    // 其他配置
  },
});

2. 曲线边（‘cubic’）：表示曲线形状的边。使用 shape: 'cubic' 来指定边的类型。

const graph = new G6.Graph({
  container: 'cubic',
  width: 800,
  height: 600,
  defaultEdge: {
    type: 'polyline',
    // 其他配置
  },
});

3. 弧线边（‘quadratic’）：表示弧线形状的边。使用 shape: 'quadratic' 来指定边的类型。

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultEdge: {
    type: 'quadratic',
    // 其他配置
  },
});

4. 折线边（‘polyline’）：表示折线形状的边。使用 shape: 'polyline' 来指定边的类型。

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultEdge: {
    type: 'polyline',
    // 其他配置
  },
});

5. 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'
  );
}

可以根据自己需求做调整，自定义边的功能还是比较强，可以增加边的可视化效果，以便更好地展示和交互。可能在图表或网络图的可视化中会使用这种类型的边，以强调边的起点、中点和状态。