【图表示例】元素-边-01

G6A Graph Visualization Framework in JavaScripthttps://g6.antv.antgroup.com/zh/examples/element/edge/#line

 项目的创建参考 G6 详细教程，注意，node版本需要：required: { node: '>=18' }G6A Graph Visualization Framework in JavaScripthttps://g6.antv.antgroup.com/manual/getting-started/step-by-step

关于data中edge的state可以参考如下说明：

Element Edge 边配置项 状态样式属性 state

在new Graph()中，edge的配置可以参考如下说明：

边配置项

下面3个属性没有找到对应的文档

// 以下3个属性没有找到文档出处
badgeFontFamily: 'iconfont',
badgeBackgroundWidth: 24,
badgeBackgroundHeight: 24,

关于layout，Radial 径向布局

二次贝塞尔曲线与三次贝塞尔曲线

【完整代码附注】

import { Graph, iconfont } from "@antv/g6";

const style = document.createElement('style');
style.innerHTML = `@import url('${iconfont.css}')`;
document.head.appendChild(style);


const data = {
  "nodes": [
    {
      "id": "node1"
    },
    {
      "id": "node2"
    },
    {
      "id": "node3"
    },
    {
      "id": "node4"
    },
    {
      "id": "node5"
    },
    {
      "id": "node6"
    }
  ],
  "edges": [
    {
      "id": "line-default",
      "source": "node1",
      "target": "node2"
    },
    {
      "id": "line-active",
      "source": "node1",
      "target": "node3",
      "states": [
        "active"
      ]
    },
    {
      "id": "line-selected",
      "source": "node1",
      "target": "node4",
      "states": [
        "selected"
      ]
    },
    {
      "id": "line-highlight",
      "source": "node1",
      "target": "node5",
      "states": [
        "highlight"
      ]
    },
    {
      "id": "line-inactive",
      "source": "node1",
      "target": "node6",
      "states": [
        "inactive"
      ]
    }
  ]
}

const layout = {
  type: 'radial',  // Radial 径向布局
  unitRadius: 220,  // 每一圈距离上一圈的距离。默认填充整个画布，即根据图的大小决定
  linkDistance: 220  // 边长度
}

const edgeStyle = function(d) {
  return {
    // type: 'line',  // 直线
    // type: 'quadratic',  // 二次贝塞尔曲线
    type: 'cubic',  // 三次贝塞尔曲线
    style: {
      labelText: (d)=> d.id + 'hh',  // 标签文字内容
      labelOffsetY: 20, // 标签在 y 轴方向上的偏移量
      labelBackGround: true,  // 是否显示背景
      endArrow: true,  // 是否显示边的结束箭头
      endArrowType: 'vee',  // 后端收尖的箭头
      badge: true,  // 是否显示边徽标
      badgeText: '\ue606', // 文字内容
      badgeFontSize: 18,  // 字体大小
      badgeOffsetX: -12,  // 徽标在 x 轴方向上的偏移量
      // 以下3个属性可能与基础图形的Text文本相关
      badgeFontFamily: 'iconfont',
      badgeBackgroundWidth: 24,
      badgeBackgroundHeight: 24,
    }
  }
}

const graph = new Graph({
  data,
  edge: edgeStyle(data),
  layout
})

graph.render()