使用dagre布局时如何避免多对多关系下的重复边问题
dagre布局多对多关系去重边及合并路径实现方案
该需求完全可以实现,具体实现方法如下:
- 首先解决重复边问题
你可以在渲染前对所有边数据做去重处理,过滤掉所有起止节点完全相同的冗余边,仅保留一条即可,你当前使用的基础dagre配置不需要做修改:
layout: { name: 'dagre', rankDir: 'LR' }
- 实现单条边延伸后分叉的效果,可选两种成熟方案:
- 添加虚拟中转节点
在公共上游节点和多个下游节点之间新增一个无视觉效果的虚拟中转节点,调整边的连接关系为上游节点 -> 虚拟节点 -> 下游节点1、上游节点 -> 虚拟节点 -> 下游节点2。虚拟节点配置为宽高为0、背景和边框全透明、不响应任何交互,用户完全感知不到该节点的存在。dagre布局会自动将该虚拟节点排布在上下游节点中间的位置,自然就形成了单条边延伸后再分叉的效果。
虚拟节点参考配置:
{ id: 'virtual_temp_1', width: 0, height: 0, style: { fill: 'transparent', stroke: 'transparent' }, interactive: false }- 自定义边绘制逻辑
直接覆写图引擎的边渲染方法,针对同一起点连接到多个子节点的场景,自行计算边的路径,将靠近起点的一段路径合并为同一条,到合适位置后再分叉,无需修改节点和边的元数据。
- 添加虚拟中转节点
内容的提问来源于stack exchange,提问作者laloune
相关产品推荐
相关产品推荐

