边总览

阅读时间约 15 分钟

G6 提供了 9 种内置边:

  • line:直线,不支持控制点;
  • polyline:折线,支持多个控制点;
  • arc:圆弧线;
  • quadratic:二阶贝塞尔曲线;
  • cubic:三阶贝塞尔曲线;
  • cubic-vertical:垂直方向的三阶贝塞尔曲线,不考虑用户从外部传入的控制点;
  • cubic-horizontal:水平方向的三阶贝塞尔曲线,不考虑用户从外部传入的控制点;
  • loop:自环。

这些内置边的默认样式分别如下图所示。
img

本文将概述 G6 中的各个内置边类型、内置边的通用属性、配置方法。各类型边详细配置项及配置方法见本目录下相应文档。

内置边类型说明

下面表格中显示了内置的各类边,同时对一些特殊的字段进行了说明:

名称描述
line连接两个节点的直线:
- controlPoints 不生效
- 更多配置详见 line 边的配置
img
polyline多段线段构成的折线,连接两个端点:
- controlPoints 表示所有线段的拐点,不指定时根据 A* 算法自动生成折线
- 更多配置详见 polyline 边的配置
img
arc连接两个节点的一段圆弧:
- controlPoints 不生效
- 使用 curveOffset 指定弧的弯曲程度,其正负影响弧弯曲的方向
- 更多配置详见 arc 边的配置
img
quadratic只有一个控制点的曲线:
- controlPoints 不指定时,会默认线的一半处弯曲
- 更多配置详见 quadratic 边的配置
img
cubic有两个控制点的曲线:
- controlPoints 不指定时,会默认线的 1/3, 2/3 处弯曲
- 更多配置详见 cubic 边的配置
img
cubic-vertical垂直方向的三阶贝塞尔曲线,不考虑用户从外部传入的控制点img
cubic-horizontal水平方向的三阶贝塞尔曲线,不考虑用户从外部传入的控制点img
loop自环。更多配置详见 loop 边的配置img

边的通用属性

所有内置的边支持的通用属性:

名称是否必须类型备注
idtrueString边唯一 ID,必须是唯一的 string
sourcetrueStringNumber起始点 id
targettrueString结束点 id
typefalseString指定边的类型,可以是内置边的类型名称,也可以是自定义边的名称。默认为 'line'
sourceAnchorfalseNumber边的起始节点上的锚点的索引值
targetAnchorfalseNumber边的终止节点上的锚点的索引值
stylefalseObject边的样式属性
labelfalseString文本文字,如果没有则不会显示
labelCfgfalseObject文本配置项

样式属性  style

Object 类型。通过 style 配置来修改边的颜色、线宽等属性。下表是 style 对象中常用的配置项:

名称是否必须类型备注
strokefalseString边的颜色
lineWidthfalseNumber边宽度
lineAppendWidthfalseNumber边响应鼠标事件时的检测宽度,当 lineWidth 太小而不易选中时,可以通过该参数提升击中范围
endArrowfalseBoolean / Objecttrue 时在边的结束端绘制默认箭头,为 false 时不绘制结束端箭头;也可以使用内置箭头配置,例如:
endArrow: {
path: G6.Arrow.vee(10, 20, 10), // 内置箭头,参数为箭头宽度、长度、偏移量 d(默认为 0)
d: 10 // 偏移量
} ;或通过 path 自定义的箭头,例如:
endArrow: {
path: 'M 0,0 L 20,10 L 20,-10 Z', // 自定义箭头路径
d: -2 // 偏移量
}
startArrowfalseBoolean / Objecttrue 时在边的开始端绘制默认箭头,为 false 时不绘制结束端箭头;也可以使用内置箭头配置,例如:
startArrow: {
path: G6.Arrow.vee(10, 20, 10), // 内置箭头,参数为箭头宽度、长度、偏移量 d(默认为 0)
d: 10 // 偏移量
} ;或通过 path 自定义的箭头,例如:
startArrow: {
path: 'M 0,0 L 20,10 L 20,-10 Z', // 自定义箭头路径
d: -2 // 偏移量
}
strokeOpacityfalseNumber边透明度
shadowColorfalseString阴影颜色
shadowBlurfalseNumber阴影模糊程度
shadowOffsetXfalseNumber阴影 x 方向偏移量
shadowOffsetYfalseNumber阴影 y 方向偏移量
lineDashfalseArray设置线的虚线样式,可以指定一个数组。一组描述交替绘制线段和间距(坐标空间单位)长度的数字。 如果数组元素的数量是奇数, 数组的元素会被复制并重复。例如, [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。
cursorfalseString鼠标在该边上时的鼠标样式,CSS 的 cursor 选项都支持

下面代码演示在实例化图时全局配置方法中配置 style

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultEdge: {
    // ... 其他属性
    style: {
      stroke: '#eaff8f',
      lineWidth: 5,
      // ... 其他样式属性
    },
  },
});

标签文本 label 及其配置  labelCfg

label String 类型。标签文本的文字内容。
labelCfg Object 类型。配置标签文本。下面是 labelCfg 对象中的常用配置项:

名称是否必须类型备注
refXfalseNumber标签在 x 方向的偏移量
refYfalseNumber标签在 y 方向的偏移量
positionfalseString文本相对于边的位置,目前支持的位置有:'start''middle''end'。默认为'middle'
autoRotatefalseBoolean标签文字是否跟随边旋转,默认 false
stylefalseObject标签的样式属性

上表中的标签的样式属性 style 的常用配置项如下:

名称是否必须类型备注
fillfalseString文本颜色
strokefalseString文本描边颜色
lineWidthfalseNumber文本描边粗细
opacityfalseNumber文本透明度
fontFamilyfalseString文本字体
fontSizefalseNumber文本字体大小
... 节点标签与边标签样式属性相同,统一整理在 Text 图形 API

下面代码演示在实例化图时全局配置方法中配置  label 和  labelCfg

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultEdge: {
    // ... 其他属性
    label: 'edge-label',
    labelCfg: {
      refY: -10,
      refX: 60,
    },
  },
});

边的配置方法

配置边的方式有三种:实例化图时全局配置,在数据中动态配置,使用 graph.edge(edgeFn) 函数配置。这几种配置方法可以同时使用,优先级:

使用 graph.edge(edgeFn) 配置 > 数据中动态配置 > 实例化图时全局配置

即有相同的配置项时,优先级高的方式将会覆盖优先级低的。

⚠️ 注意:idsourcetargetlabel 应当配置到每条边数据中外,其余的 边的通用属性 以及各个边类型的特有属性(见内置边类型)均支持三种配置方式。

实例化图时全局配置

用户在实例化 Graph 时候可以通过 defaultEdge  配置边,这里的配置是全局的配置,将会在所有边上生效。

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

在数据中动态配置

如果需要使不同边有不同的配置,可以将配置写入到边数据中。这种配置方式可以通过下面代码的形式直接写入数据,也可以通过遍历数据的方式写入。

const data = {
  nodes: [
    ... // 节点
  ],
  edges: [{
    source: 'node0',
    target: 'node1'
    type: 'polyline',
    ... // 其他配置
    style: {
      ...  // 样式属性,每种边的详细样式属性参见各边文档
    }
  },{
    source: 'node1',
    target: 'node2'
    type: 'cubic',
    ... // 其他配置
    style: {
      ...  // 样式属性,每种边的详细样式属性参见各边文档
    }
  },
    ... // 其他边
  ]
}

使用 graph.edge()

该方法可以为不同边进行不同的配置。
提示:

  • 该方法必须在 render 之前调用,否则不起作用;
  • 由于该方法优先级最高,将覆盖其他地方对边的配置,这可能将造成一些其他配置不生效的疑惑;
  • 该方法在增加元素、更新元素时会被调用,如果数据量大、每条边上需要更新的内容多时,可能会有性能问题。
// const data = ...
// const graph = ...
graph.edge((edge) => {
  return {
    id: edge.id,
    type: 'polyline',
    style: {
      fill: 'steelblue',
    },
  };
});

graph.data(data);
graph.render();

实例演示

const data = {
  nodes: [
    { id: '1', x: 50, y: 50, size: 20 },
    { id: '2', x: 150, y: 50, size: 20 },
    { id: '3', x: 200, y: 50, size: 20 },
    { id: '4', x: 300, y: 130, size: 20 },
    { id: '5', x: 350, y: 50, size: 20 },
    { id: '6', x: 450, y: 50, size: 20 },
    { id: '7', x: 500, y: 50, size: 20 },
    { id: '8', x: 600, y: 50, size: 20 },
    { id: '9', x: 650, y: 50, size: 20 },
    { id: '10', x: 750, y: 50, size: 20 },
    { id: '11', x: 800, y: 50, size: 20 },
    { id: '12', x: 900, y: 150, size: 20 },
    { id: '13', x: 950, y: 50, size: 20 },
    { id: '14', x: 1050, y: 150, size: 20 },
    { id: '15', x: 1100, y: 50, size: 20 },
  ],
  edges: [
    { source: '1', target: '2', type: 'line', label: 'line' },
    { source: '3', target: '4', type: 'polyline', label: 'polyline' },
    { source: '5', target: '6', type: 'arc', label: 'arc' },
    { source: '7', target: '8', type: 'quadratic', label: 'quadratic' },
    { source: '9', target: '10', type: 'cubic', label: 'cubic' },
    { source: '11', target: '12', type: 'cubic-vertical', label: 'cubic-vertical' },
    { source: '13', target: '14', type: 'cubic-horizontal', label: 'cubic-horizontal' },
    { source: '15', target: '15', type: 'loop', label: 'loop' },
  ],
};

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1500,
  height: 300,
  linkCenter: true, // 使边连入节点的中心
});
graph.data(data);
graph.render();

显示结果:
img

调整边的样式

可以在边上添加文本,修改边的样式。下面演示将配置写入数据的方式配置边。使用下面代码替换上面代码中的 9-10、11-12 两条边数据,修改这两条边的样式和其文本。

// 使 9-10 的 cubic 边文本下移 15 像素
{
  source: '9',
  target: '10',
  type: 'cubic',
  label: 'cubic',
  labelCfg: {
    refY: -15 // refY 默认是顺时针方向向下,所以需要设置负值
  }
},
// 设置 11-12 的 cubic-vertical 边的颜色、虚线、粗细,并设置文本样式、随边旋转
{
  source: '11',
  target: '12',
  type: 'cubic-vertical',
  color: '#722ed1',     // 边颜色
  size: 5,              // 边粗细
  style: {
  	lineDash: [2, 2]    // 虚线边
  },
  label: 'cubic-vertical',
  labelCfg: {
  	position: 'center', // 其实默认就是 center,这里写出来便于理解
    autoRotate: true,   // 使文本随边旋转
    style: {
      stroke: 'white',  // 给文本添加白边和白色背景
    	lineWidth: 5,     // 文本白边粗细
      fill: '#722ed1',  // 文本颜色
    }
  }
}
img

相关阅读