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'