简介这是一份面向数据可视化开发者与前端工程师的 AntV G6 多边缘实战示例资源聚焦图可视化中同一对节点存在多种连接关系的建模难题适合已掌握 G6 基础、希望进阶复杂关系网络的读者。压缩包共 25 个文件约 4.89MB以 12 张 png 效果截图、6 个 js 示例脚本、2 个 json 配置、2 个 html 页面及 2 个 md 说明文档为主另含 gitignore 等辅助文件覆盖从数据转换、图数据构造到页面渲染的完整链路。资源围绕自定义 Edge 类型与 EdgeGroup 两种多边缘实现方式展开示例代码展示了不同关系边的样式区分、分组管理与批量操作思路并配有多种布局下的效果图便于对照理解。目前已有 756 人学习下载读者可据此快速搭建可运行的多边缘演示环境并在此基础上二次定制边样式与交互行为。1. 多边图渲染的痛点为什么你的 G6 图里两条边永远叠在一起做过关系图谱的同行大概率都遇到过这个场景两个节点之间存在两条以上的业务关系比如 A 对 B 既有「投资」又有「担保」结果渲染出来只有一条线另一条被压在底下用户点都点不到。这不是 G6 的 bug而是默认布局和边路由策略的必然结果——G6 的边默认走两点之间的直线多条边共享同一对起点终点时几何位置完全重合。antv-g6-multi-edges 这个方向要解决的就是这件事让同一对节点之间的多条边各自可见、可交互、可区分。它适合正在用 G6 做风控图谱、社交关系、知识图谱、供应链链路的前端和可视化工程师尤其是那些已经跑通了单边渲染、现在被多边重叠卡住的人。核心思路不复杂但参数和边界条件不少下面从选型到落地一步步拆。2. 多边渲染的三条技术路线弧线、偏移、自定义边2.1 先搞清楚 G6 的边是怎么画出来的G6 里每一条边最终都对应一个图形路径。默认的line边类型走的是M x1 y1 L x2 y2也就是一条直线。当同一对节点之间有 N 条边时如果都用line这 N 条路径的坐标完全一致视觉上就是一条。要打破这个重合本质上是让每条边在两点之间走不同的路径。G6 提供了几个层面的干预点一是边的type内置了line、quadratic、cubic、arc等二是边的style可以控制curveOffset、lineWidth、stroke等三是自定义边通过继承或注册registerEdge完全接管路径计算。理解这三个层面后面的选型就不会乱。还有一个容易被忽略的点边的绘制顺序。G6 按数据数组顺序绘制后画的盖住先画的。所以即使你用了弧线如果曲率方向一致视觉上仍然可能重叠。多边渲染必须同时考虑「路径差异化」和「绘制顺序」两件事。2.2 三条路线的适用场景对比路线实现方式适用边数交互友好度实现成本弧线法quadraticcurveOffset2~5 条中低偏移法自定义边按索引平移控制点3~8 条高中自定义边registerEdge完全接管不限高高弧线法最省事G6 内置的quadratic边支持curveOffset参数给每条边设不同的偏移量就能错开。但它的局限是偏移量是相对两点中点的垂直方向边数多了之后外侧边的曲率会非常大视觉上像一把扇子超过 5 条就不好看。偏移法是在弧线基础上做改进不单纯靠增大曲率而是把控制点沿垂直方向等距平移同时限制最大曲率。这样 6~8 条边也能保持可读。实现上需要自定义边的draw方法自己算控制点坐标。自定义边最灵活可以做出「多条边聚合成一条粗线、hover 时展开」这种高级效果但代码量大调试成本高。我一般建议先用弧线法跑通边数超过 5 条再上偏移法确实有聚合需求才考虑自定义边。2.3 用内置 quadratic 边跑通最小可复现示例先看一个能直接跑的最小例子。假设有一组节点和边数据同一对节点之间有 3 条边import G6 from antv/g6; // 构造测试数据A-B 之间三条边B-C 之间两条边 const data { nodes: [ { id: A, x: 100, y: 200 }, { id: B, x: 400, y: 200 }, { id: C, x: 700, y: 200 }, ], edges: [ { source: A, target: B, label: 投资 }, { source: A, target: B, label: 担保 }, { source: A, target: B, label: 任职 }, { source: B, target: C, label: 供应 }, { source: B, target: C, label: 采购 }, ], }; // 关键按 source-target 分组给同组边分配不同的 curveOffset const edgeGroupMap {}; data.edges.forEach((edge) { const key ${edge.source}__${edge.target}; if (!edgeGroupMap[key]) edgeGroupMap[key] []; edgeGroupMap[key].push(edge); }); Object.values(edgeGroupMap).forEach((group) { const count group.length; group.forEach((edge, index) { // 以组中心为 0向两侧对称分布偏移量 const offset (index - (count - 1) / 2) * 30; edge.type quadratic; edge.curveOffset offset; // 曲率为 0 时退化成直线给一个最小绝对值避免重叠 if (Math.abs(edge.curveOffset) 1) edge.curveOffset 1; }); }); const graph new G6.Graph({ container: mountNode, width: 800, height: 400, defaultEdge: { style: { endArrow: true, lineWidth: 1.5 }, labelCfg: { autoRotate: true, style: { fontSize: 12 } }, }, }); graph.data(data); graph.render();这段代码的核心逻辑是「分组 对称偏移」。先按source__target把边分组每组内根据索引计算偏移量。(index - (count - 1) / 2)这个公式让偏移量以 0 为中心对称分布比如 3 条边得到 -30、0、302 条边得到 -15、15。这样视觉上是对称的不会所有边都往一侧弯。参数说明curveOffset的单位是像素正值和负值代表弧线向两侧弯曲。30 这个值不是固定的节点间距越大可以适当增大一般取节点间距的 5%~10%。如果边数超过 5 条30 会导致最外侧边曲率过大需要改用偏移法。labelCfg.autoRotate让标签跟随边的方向旋转多边场景下这个必须开否则标签会横七竖八。endArrow是箭头多边时箭头位置也会随弧线偏移这是符合预期的。2.4 边数超过 5 条时改用偏移法弧线法在边数多的时候会翻车因为曲率随偏移量线性增长最外侧边会弯成一个半圆。偏移法的思路是控制点不沿垂直方向无限平移而是把多条边在垂直方向等距排布同时把曲率限制在一个合理范围内。实现方式是注册一个自定义边在draw里自己算路径。下面是一个简化版import G6 from antv/g6; G6.registerEdge(multi-edge, { draw(cfg, group) { const startPoint cfg.startPoint; const endPoint cfg.endPoint; const index cfg.edgeIndex || 0; // 当前边在组内的索引 const total cfg.edgeTotal || 1; // 组内总边数 const gap 12; // 每条边的垂直间距 // 计算两点连线的垂直方向单位向量 const dx endPoint.x - startPoint.x; const dy endPoint.y - startPoint.y; const len Math.sqrt(dx * dx dy * dy) || 1; const nx -dy / len; const ny dx / len; // 以组中心为 0 对称分布 const offset (index - (total - 1) / 2) * gap; // 控制点取两点中点再沿垂直方向平移 const cx (startPoint.x endPoint.x) / 2 nx * offset * 2; const cy (startPoint.y endPoint.y) / 2 ny * offset * 2; const path [ [M, startPoint.x, startPoint.y], [Q, cx, cy, endPoint.x, endPoint.y], ]; const shape group.addShape(path, { attrs: { path, stroke: cfg.style?.stroke || #99add1, lineWidth: cfg.style?.lineWidth || 1.5, endArrow: true, }, name: multi-edge-path, }); return shape; }, });逻辑说明先算两点连线的垂直单位向量(nx, ny)这是偏移的方向。控制点取中点再沿垂直方向平移offset * 2乘 2 是因为二次贝塞尔曲线的实际弯曲程度约为控制点偏移量的一半。gap控制每条边的间距12 像素在大多数场景下够用节点密集时可以降到 8。参数说明edgeIndex和edgeTotal需要你在数据预处理阶段写进每条边的数据里G6 不会自动算。gap是唯一需要调的参数它决定了多条边的视觉密度。如果边数超过 8 条gap要降到 6 以下否则最外侧边会超出节点包围盒。用这个自定义边时数据预处理和前面类似只是把type换成multi-edge并写入edgeIndex和edgeTotalObject.values(edgeGroupMap).forEach((group) { group.forEach((edge, index) { edge.type multi-edge; edge.edgeIndex index; edge.edgeTotal group.length; }); });3. 多边场景下的交互与标签避坑3.1 点击命中区域为什么总是选错边多边渲染跑通后第一个冒出来的问题往往是点击。用户点最上面那条边结果选中的是底下那条。原因是 G6 的点击命中基于图形路径的包围盒或实际路径弧线边的包围盒是矩形多条边的包围盒高度重叠命中判定就会乱。解决办法是给每条边加一个透明的加粗路径作为命中区域。在自定义边的draw里除了画可见路径再画一条lineWidth为 10~15、stroke为透明的路径放在可见路径下面// 命中区域透明加粗路径放在可见路径之前绘制 group.addShape(path, { attrs: { path, stroke: transparent, lineWidth: 12, lineAppendWidth: 4, }, name: multi-edge-hit, }); // 可见路径 const shape group.addShape(path, { attrs: { path, stroke: #99add1, lineWidth: 1.5, endArrow: true }, name: multi-edge-path, });lineAppendWidth是 G6 特有的参数在原有线宽基础上再增加命中宽度对细边特别有用。注意命中路径要先画这样它在图层下方不会遮挡可见路径的视觉。3.2 标签重叠的三种处理策略多边场景下标签重叠几乎是必然的。三条边的标签如果都放在弧线中点会挤在一起。常见做法有三种第一种是标签跟随弧线偏移每条边的标签放在各自弧线的中点这样标签天然错开。G6 的labelCfg默认放在边的中点弧线边的中点会随曲率偏移所以只要curveOffset不同标签位置就不同。这是最省事的。第二种是标签沿边方向错位通过labelCfg.offset把标签沿边的切线方向平移。适合边数多、弧线偏移量小的情况。第三种是标签聚合多条边的标签合并成一个hover 时展开。这个需要自定义交互成本最高但边数超过 8 条时几乎是唯一选择。我一般先用第一种标签还挤就上第二种边数超过 8 条才考虑聚合。labelCfg的配置示例defaultEdge: { labelCfg: { autoRotate: true, offset: 8, style: { fontSize: 12, fill: #333 }, }, },offset是标签相对边中点的偏移距离配合autoRotate使用。注意autoRotate在弧线边上会让标签沿弧线切线方向旋转视觉上更自然但边接近水平时标签可能倒置需要额外处理。3.3 边状态切换时的重绘开销多边场景下如果每条边都绑定了 hover 高亮、点击选中这类状态切换重绘开销会明显上升。因为 G6 的状态切换会触发边的重绘而自定义边的draw里做了路径计算边数多时会有卡顿。优化思路有两个一是把路径计算的结果缓存起来状态切换时只改stroke和lineWidth不重算路径二是用graph.setItemState的批量模式避免逐条触发重绘。缓存路径的做法是在draw里把算好的path存到cfg上下次重绘时直接取draw(cfg, group) { let path cfg._cachedPath; if (!path) { // ... 计算 path cfg._cachedPath path; } // 用 path 画图 }注意cfg是 G6 内部对象直接挂属性不是官方推荐做法但在实际项目里很有效。更规范的做法是用graph.get(edgeCache)这类外部 Map 来存。4. 避坑与排查多边渲染最容易翻车的五个点4.1 边数据顺序变了偏移量全乱现象刷新页面后同一条边的弧线方向变了或者两条边交换了位置。原因分组后按数组顺序分配edgeIndex如果后端返回的边数据顺序不稳定索引就会变偏移量跟着变。解决在数据预处理阶段对每组边做稳定排序比如按边的某个业务字段关系类型、创建时间排序保证每次渲染顺序一致。不要依赖后端返回顺序。4.2 自环边和多边混在一起时路径异常现象节点有自环边source 等于 target同时又有普通多边自环边的路径画到了节点外面。原因自环边的起点终点相同垂直方向向量算出来是零向量偏移计算失效。解决在自定义边的draw里先判断startPoint和endPoint是否重合重合时走自环边的专用路径用arc或cubic画一个环不要走多边逻辑。G6 内置的loop边类型可以直接用。4.3 curveOffset 设成 0 导致边退化成直线现象三条边里中间那条和另外两条中的一条完全重叠。原因对称偏移公式在边数为奇数时中间那条边的偏移量是 0退化成直线和默认边重叠。解决给偏移量设一个最小绝对值比如if (Math.abs(offset) 1) offset 1。或者干脆不用对称分布所有边都往同一侧偏但这样视觉上不对称一般不推荐。4.4 缩放后边宽和偏移量不协调现象图放大后多条边挤在一起缩小后边又散得太开。原因curveOffset和gap是像素值不随缩放变化但节点间距随缩放变化比例就失调了。解决监听graph.on(viewportchange)根据当前缩放比例动态调整curveOffset或gap。或者用 G6 的graph.getZoom()拿到缩放比在重绘时按比例缩放偏移量。这个坑在需要缩放的场景里几乎必踩。4.5 边数动态变化时索引没更新现象新增一条边后原有的边偏移量没变新边和某条旧边重叠。原因edgeIndex和edgeTotal是在数据预处理时写死的数据变了但没重新计算。解决把分组和索引分配逻辑封装成一个函数每次graph.changeData之前重新跑一遍。不要只在初始化时算一次。5. 进阶用边捆绑做大规模多边图的降噪边数超过 10 条时无论怎么偏移视觉上都是一团乱麻。这时候要考虑边捆绑edge bundling把同一对节点之间的多条边聚合成一条粗线用颜色或粗细表示边数hover 或点击时再展开成多条。G6 本身没有内置边捆绑但可以用自定义边 交互实现。核心思路是默认渲染一条聚合边lineWidth按边数加权颜色按关系类型混合监听边的 hover 事件hover 时把聚合边替换成多条展开边。实现上分两步。第一步是数据聚合把同一对节点的多条边合并成一条记录原始边列表const bundledEdges Object.entries(edgeGroupMap).map(([key, group]) { const [source, target] key.split(__); return { id: bundle_${key}, source, target, type: bundle-edge, bundleCount: group.length, bundleEdges: group, // 保留原始边展开时用 }; });第二步是注册bundle-edge自定义边lineWidth按bundleCount映射比如Math.min(2 bundleCount * 1.5, 12)。然后监听 hovergraph.on(edge:mouseenter, (e) { const edge e.item; const model edge.getModel(); if (model.type ! bundle-edge) return; // 隐藏聚合边渲染展开边 graph.hideItem(edge); model.bundleEdges.forEach((rawEdge, index) { graph.addItem(edge, { ...rawEdge, type: multi-edge, edgeIndex: index, edgeTotal: model.bundleEdges.length, }); }); }); graph.on(edge:mouseleave, (e) { // 反向操作移除展开边显示聚合边 });这个方案的坑在于展开和收起的时机控制。如果鼠标快速划过mouseenter和mouseleave会频繁触发导致边反复增删性能急剧下降。我一般会加一个 100ms 的防抖或者用graph.get(edgeExpanded)标记当前展开状态避免重复操作。另一个坑是展开边的位置。展开边是基于原始节点位置算的如果聚合边在渲染时做了偏移展开边要和聚合边的位置对齐否则视觉上会跳。解决办法是聚合边不做偏移展开边以聚合边为中心对称分布。验证多边渲染是否正确的办法很简单在控制台打印每条边的path检查同一对节点的边路径是否互不相同。如果两条边的path字符串完全一致说明偏移没生效。这个检查在调试阶段比肉眼看图靠谱得多。我自己做这类图的时候习惯先把边数控制在 5 条以内用弧线法跑通确认交互和标签没问题再逐步加边数、换偏移法。一上来就上边捆绑调试成本太高容易在路径计算和交互状态里绕不出来。多边渲染这件事本质是几何计算和交互命中的平衡参数没有万能值得根据节点间距和边数现场调。希望帮到你。本文还有配套的精品资源点击获取
