g6 使用自定义边

### G6 自定义边的使用方法 在 G6 图可视化库中，可以通过扩展内置功能来自定义边。以下是关于如何创建和使用自定义边的具体说明以及示例代码。 #### 创建自定义边 要创建一条自定义边，需通过 `registerEdge` 方法注册一个新的边类型[^1]。此方法允许开发者指定边的行为及其绘制逻辑。具体来说，需要提供以下参数： - **名称**: 新边类型的唯一标识符。 - **配置项**: 定义新边的核心属性，包括默认样式、事件处理程序等。 下面是一个简单的例子，展示如何注册并使用一条带有箭头的直线作为自定义边[^2]: ```javascript // 注册自定义边 G6.registerEdge('customArrow', { draw(cfg, group) { // cfg 是数据模型中的单条边的数据，group 是该边所属于的容器 const startPoint = cfg.startPoint; // 起始点坐标 const endPoint = cfg.endPoint; // 结束点坐标 // 添加线段 shape const line = group.addShape('line', { attrs: { x1: startPoint.x, y1: startPoint.y, x2: endPoint.x, y2: endPoint.y, stroke: '#000' // 设置线条颜色 }, name: 'edge-line' }); // 计算箭头位置 const diffX = endPoint.x - startPoint.x; const diffY = endPoint.y - startPoint.y; const length = Math.sqrt(diffX * diffX + diffY * diffY); const unitX = diffX / length; const unitY = diffY / length; // 箭头顶点的位置 const arrowPointX = endPoint.x - (unitX * 8); // 长度调整因子为8 const arrowPointY = endPoint.y - (unitY * 8); // 左侧箭头顶点 const leftArrowX = arrowPointX + (-unitY * 4); // 偏移量设置为4 const leftArrowY = arrowPointY + (unitX * 4); // 右侧箭头顶点 const rightArrowX = arrowPointX + (+unitY * 4); const rightArrowY = arrowPointY + (-unitX * 4); // 添加三角形 shape 表示箭头 group.addShape('path', { attrs: { path: [ ['M', arrowPointX, arrowPointY], ['L', leftArrowX, leftArrowY], ['L', rightArrowX, rightArrowY], ['Z'] ], fill: '#000' // 设置填充颜色 }, name: 'arrow-shape' }); return line; // 返回主要的 shape 对象 } }, 'single-edge'); // 继承的基础 edge 类型 ``` 上述代码展示了如何构建一个带箭头的自定义边，并将其命名为 `'customArrow'`。其中的关键部分在于计算箭头的方向向量，并基于这些方向向量生成三个关键点来构成箭头形状[^3]。 #### 应用自定义边到图表 一旦完成自定义边的注册，在初始化图实例时即可直接应用它: ```javascript const data = { nodes: [{ id: 'node1', x: 100, y: 200 }, { id: 'node2', x: 300, y: 200 }], edges: [{ source: 'node1', target: 'node2', type: 'customArrow' // 使用刚才注册的 customArrow 类型 }] }; const graph = new G6.Graph({ container: 'mountNode', // DOM 容器 ID 或者 HTML 元素对象 width: 500, height: 500 }); graph.data(data); graph.render(); ``` 以上代码片段将之前定义好的 `'customArrow'` 边应用于两个节点之间。 ---