G6Editor 边的参数配置

  ⚠️ 注意: 当边太细交互不易命中时，请设置 lineAppendWidth 属性值。

属性：

属性名	含义	备注
path	线条路径	可以是 String 形式，也可以是线段的数组。
startArrow	起始端的箭头	为 true 时在边的结束端绘制默认箭头，为 false 时不绘制结束端箭头。也可以是一个通过 path 自定义的箭头
endArrow	末尾端的箭头	为 true 时在边的开始端绘制默认箭头，为 false 时不绘制开始端箭头。也可以是一个通过 path 自定义的箭头
lineAppendWidth	边的击中范围	提升边的击中范围，扩展响应范围，数值越大，响应范围越广
lineCap	设置线条的结束端点样式
lineJoin	设置两条线相交时，所创建的拐角形状
lineWidth	设置当前的线条宽度
miterLimit	设置最大斜接长度
lineDash	设置线的虚线样式，可以指定一个数组	一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。

用法：

group.addShape('path', {
  attrs: {
    startArrow: {
      // 自定义箭头指向(0, 0)，尾部朝向 x 轴正方向的 path
      path: 'M 0,0 L 20,10 L 20,-10 Z',
      // 箭头的偏移量，负值代表向 x 轴正方向移动
      // d: -10,
    },
    endArrow: {
      // 自定义箭头指向(0, 0)，尾部朝向 x 轴正方向的 path
      path: 'M 0,0 L 20,10 L 20,-10 Z',
      // 箭头的偏移量，负值代表向 x 轴正方向移动
      // d: -10,
    },
    path: [
      ['M', 100, 100],
      ['L', 200, 200],
    ],
    stroke: '#000',
    lineWidth: 8,
    lineAppendWidth: 5,
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'path-shape',
});

 

附：G6最新文档：https://g6.antv.vision/zh/docs/manual/introduction