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

最新推荐文章于 2025-04-16 17:32:52 发布

原创

最新推荐文章于 2025-04-16 17:32:52 发布 · 7.1k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#antv/g6 #自定义边 #edge

本文详细介绍了AntVG6中边的使用，包括内置边如直线、曲线、弧线等类型，以及如何自定义边以增强可视化效果。讲解了边的基本属性和关键功能，如ID、源目标节点、标签和样式配置。

前言

上篇文章简单介绍了一下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'