自定义边
阅读时间约 1 分钟
自定义边的方式和自定义节点类似,你可以继承现有边,也可以基于 G 图形进行全新的边开发。
这里给出一个继承 BaseEdge
的示例,实现一个自定义直线边:
import { BaseEdge } from '@antv/g6';import { Line } from '@antv/g';import type { BaseEdgeStyleProps } from '@antv/g6';class ExtendBaseEdge extends BaseEdge {// 重写 getKeyStyle 方法protected getKeyStyle(attributes: Required<BaseEdgeStyleProps>) {return { ...super.getKeyStyle(attributes), lineWidth: 2, stroke: '#000' };}// 实现 getKeyPath 方法protected getKeyPath(attributes) {const { sourceNode, targetNode } = this;const [x1, y1] = sourceNode.getPosition();const [x2, y2] = targetNode.getPosition();return [['M', x1, y1],['L', x2, y2],];}}
通过 G6 提供的 register
方法注册即可,详见注册边
可在数据
或边样式映射
中使用并配置自定义边,详见配置边