边 | G6Lite

边通过 edge 配置类型与样式。

基础配置

edge: {
  type: 'line',
  style: {
    stroke: '#d9d9d9',
    lineWidth: 2,
    endArrow: true,
  },
}

类型

类型	说明
`line`	直线，默认类型
`arc`	弧线，适合平行边
`cubic`	三次贝塞尔曲线
`polyline`	折线，支持正交和树图路由

样式字段

字段	说明
`stroke`	线条颜色
`lineWidth`	视觉线宽
`hitAreaWidth`	总交互命中宽度
`opacity`	不透明度
`lineDash`	虚线
`startArrow` / `endArrow`	起点 / 终点箭头
`arrowSize`	箭头大小
`curvature` / `curveOffset`	弧线或曲线弯曲程度
`radius`	折线拐角圆角
`router`	折线路由，如 `orth`
`label*`	边标签字段

函数式样式签名为 (source, target, edge) => value：

edge: {
  style: {
    stroke: (_source, _target, edge) => edge.data?.risk === 'high' ? '#ff4d4f' : '#bfbfbf',
    label: (_source, _target, edge) => (edge.data?.label as string) ?? '',
  },
}

细边交互热区

细线场景可以独立扩大边的交互热区，不需要加粗视觉线：

edge: {
  style: {
    lineWidth: 1.5,
    hitAreaWidth: 16,
  },
}

hitAreaWidth 表示边的总命中宽度，因此 16 相当于中心线两侧各约 8 的热区。它适用于直线、平行边、弧线、折线、三次曲线、自环和箭头，也会被 hover、click-select、tooltip 与 drag-edge 等共享 Picking 交互使用。

未配置时，命中宽度继承最终 lineWidth；配置值小于视觉线宽、为负数或不是有限数值时，也会回退到视觉线宽。该值使用与 lineWidth 相同的屏幕渲染像素语义，业务不需要乘 zoom、DPR 或 Picking framebuffer 比例。虚线间隙仍保持可命中。

状态样式

edge: {
  stateStyles: {
    selected: { stroke: '#1890ff', lineWidth: 3, hitAreaWidth: 18 },
    highlight: { stroke: '#faad14', lineWidth: 3 },
    inactive: { opacity: 0.15 },
  },
}

平行边与自环

如果同一对节点之间存在多条边，建议启用平行边处理，让边自动错开。

transforms: [
  {
    type: 'process-parallel-edges',
    distance: 18,
  },
];

更多说明见平行边与自环。

边

基础配置

类型

样式字段

细边交互热区

状态样式

平行边与自环

相关

目录