mxGraph边重叠问题：mxParallelEdgeLayout无效的原因及替代方案

首先明确：mxParallelEdgeLayout确实是mxGraph官方用来解决平行边重叠的方案，但你的使用方式可能存在几个关键问题导致没生效，下面一步步拆解：

一、为什么你的布局执行后无效果？ #

1. 执行时机不对 #

你只在初始化阶段执行了一次parallelEdges.execute(parent)，但后续添加、修改或移动节点/边时，布局不会自动重新触发。mxGraph的布局默认是"一次性"的，除非你绑定事件监听来响应图形变化。

2. 缺少关键布局参数配置 #

默认的spacing（平行边之间的间距）值可能极小（比如默认是5px），视觉上看起来还是重叠。你需要手动设置合适的间距值，让边之间的空隙足够明显。

3. 父容器范围或配置冲突 #

• 检查graph.getDefaultParent()是否真的包含了所有需要处理的边，如果你的边是添加在其他子容器中，布局不会生效。
• 你的自定义GraphManager或EdgeManager可能覆盖了布局逻辑，比如EdgeManager可能接管了边的路径计算，或者graphMgr.configure()中禁用了自动布局相关的设置，需要排查这两个自定义类的实现。

4. 代码笔误 #

注意model.isCreateIds();这行是获取当前是否自动创建ID的状态，而不是开启该功能——正确的写法应该是model.setCreateIds(true);，如果没开启自动ID管理，可能导致后续布局时无法正确识别边的关联关系。

二、修正后的mxParallelEdgeLayout使用示例 #

model = new mxGraphModel();
model.setCreateIds(true); // 修正：开启自动ID管理
graph = new mxGraph(container, model);
var graphMgr = new GraphManager(graph);
var edgeMgr = new EdgeManager();

// 先完成基础配置
graphMgr.configure();
graphMgr.defineStyles();
graphMgr.defineLayout(model);

var parent = graph.getDefaultParent();

// 初始化平行边布局，设置合适间距
var parallelEdges = new mxParallelEdgeLayout(graph);
parallelEdges.spacing = 20; // 调整为你需要的间距，比如20px

// 初始化时执行一次布局
parallelEdges.execute(parent);

// 绑定事件，自动响应图形变化
graph.addListener(mxEvent.CELL_ADDED, function(sender, evt) {
  var cell = evt.getProperty('cell');
  if (cell.isEdge()) {
    parallelEdges.execute(parent);
  }
});

graph.addListener(mxEvent.CELL_MOVED, function(sender, evt) {
  // 节点移动时也需要重新调整边布局
  parallelEdges.execute(parent);
});

graph.addListener(mxEvent.CELL_CHANGED, function(sender, evt) {
  var cell = evt.getProperty('cell');
  if (cell.isEdge()) {
    parallelEdges.execute(parent);
  }
});

三、其他解决边重叠的方法 #

如果mxParallelEdgeLayout不能完全满足需求，还可以尝试这些方案：

• 调整正交边样式参数：直接修改正交边的默认间距，比如：

  // 全局设置正交边的间距
  mxEdgeStyle.Orthogonal.prototype.spacing = 15;
  

  或者在定义样式时指定：

  var style = graph.getStylesheet().getDefaultEdgeStyle();
  style[mxConstants.STYLE_EDGE] = mxEdgeStyle.Orthogonal;
  style[mxConstants.STYLE_SPACING] = 15;
  

• 组合布局：使用mxCompositeLayout将平行边布局和正交布局组合，先处理平行边再优化整体正交路径：

  var compositeLayout = new mxCompositeLayout([
    new mxParallelEdgeLayout(graph),
    new mxOrthogonalLayout(graph)
  ]);
  compositeLayout.execute(parent);
  

• 自定义边路径：通过代码手动设置边的控制点（mxGeometry.points），或者允许用户拖拽边的控制点来调整路径，mxGraph默认支持边控制点的拖拽编辑。

• 自定义边处理逻辑：通过mxEdgeHandler扩展边的拖拽行为，确保在用户调整边时自动保持边之间的间距。

内容的提问来源于stack exchange，提问作者Tyler Dahle