箭头

阅读时间约 5 分钟

无论是内置边还是自定义边,都可以为其配置起始端箭头与结束端箭头。G6 中的箭头分为默认箭头、内置箭头、自定义箭头。


img

默认箭头

img

使用方法

在边的样式属性 style 中将 endArrowstartArrow 配置为 true 即可:

style: {
  endArrow: true,
  startArrow: true
}

内置箭头

v3.5.8 后支持。

各箭头概览

名称参数使用方法效果
triangle
依次为箭头宽度(默认 10)、长度(默认 15)、偏移量(默认为 0,与 d 对应)
endArrow: {
path: G6.Arrow.triangle(10, 20, 25),
d: 25
}
img
vee
依次为箭头宽度(默认 15)、长度(默认 20)、偏移量(默认为 0,与 d 对应)
endArrow: {
path: G6.Arrow.vee(10, 20, 25),
d: 25
}
img
circle
依次为箭头半径(默认 5)、偏移量(默认为 0,与 d 对应)
endArrow: {
path: G6.Arrow.circle(10, 25),
d: 25
}
img
diamond
依次为箭头宽度(默认 15)、长度(默认 15)、偏移量(默认为 0,与 d 对应)
endArrow: {
path: G6.Arrow.diamond(10, 20, 25),
d: 25
}
img
rect
依次为箭头宽度(默认 10)、长度(默认 10)、偏移量(默认为 0,与 d 对应)
endArrow: {
path: G6.Arrow.rect(10, 20, 25),
d: 25
}
img
triangleRect
依次为箭头三角形宽度(默认 15)、三角形长度(默认 15)、矩形宽度(默认 15)、矩形长度(默认 3)、三角形与矩形间距(默认为 5)、偏移量(默认为 0,与 d 对应)
endArrow: {
path: G6.Arrow.triangleRect(15, 15, 15, 3, 5, 25),
d: 25
}
img

使用方法

调用 G6.Arrow.arrowName 配置边的样式属性 styleendArrowstartArrowpath

style: {
  endArrow: {
    path: G6.Arrow.triangle(10, 20, 25), // 使用内置箭头路径函数,参数为箭头的 宽度、长度、偏移量(默认为 0,与 d 对应)
    d: 25
  },
  startArrow: {
    path: G6.Arrow.vee(15, 20, 15), // 使用内置箭头路径函数,参数为箭头的 宽度、长度、偏移量(默认为 0,与 d 对应)
    d: 15
  },
}

自定义箭头

参见高级指引 自定义箭头

配置箭头样式

只有内置箭头和自定义箭头可以配置样式。

配置项

名称是否必须类型备注
fillfalseString填充颜色,默认无填充
strokefalseString描边颜色,默认与边颜色相同
lineWidthfalseNumber描边宽度,默认与边宽度相同
opacityfalseNumber透明度
shadowColorfalseString阴影颜色
shadowBlurfalseNumber阴影模糊程度
shadowOffsetXfalseNumber阴影 x 方向偏移量
shadowOffsetYfalseNumber阴影 y 方向偏移量
lineDashfalseArray描边的虚线样式,可以指定一个数组。一组描述交替绘制线段和间距(坐标空间单位)长度的数字。 如果数组元素的数量是奇数, 数组的元素会被复制并重复。例如, [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。

使用方法

// 内置箭头
style: {
  endArrow: {
    path: G6.Arrow.triangle(10, 20, 25), // 使用内置箭头路径函数,参数为箭头的 宽度、长度、偏移量(默认为 0,与 d 对应)
    d: 25,
    fill: '#f00',
    stroke: '#0f0',
    opacity: 0.5,
    lineWidth: 3,
    // ...
  },
}


// 自定义箭头
style: {
  endArrow: {
    path: 'M 0,0 L 20,10 L 20,-10 Z',
    d: 5,
    fill: '#f00',
    stroke: '#0f0',
    opacity: 0.5,
    lineWidth: 3,
    // ...
  },
}