dagre-d3-es中节点组自动布局异常问题排查求助

以下是几个大概率导致你遇到问题的原因及对应解决方法：

• 组节点未设置合理尺寸
  dagre布局引擎需要知道组节点的尺寸才能正确计算包裹子节点的位置，如果你只创建了组节点但没指定宽高，它无法自动计算子节点的包围盒来适配。解决方法：
  要么手动指定组的宽高：

graph.setNode('group1', { label: '分组1', width: 220, height: 180 });

要么确保在调用layout前所有子节点都已添加，部分dagre版本会自动根据子节点尺寸计算组的大小（如果没手动设置宽高的话）。

• 子节点残留手动坐标
  如果你的子节点之前被手动设置过x/y坐标，调用layout时这些自定义值会干扰自动布局计算，导致组和子节点位置错位。解决方法：
  在run布局前清除所有节点的手动坐标：

graph.nodes().forEach(id => {
  const nodeAttr = graph.node(id);
  delete nodeAttr.x;
  delete nodeAttr.y;
});

• setParent调用顺序错误
  必须先把组节点添加到图中，再添加子节点，最后调用setParent关联父子关系。反过来的话，dagre无法正确识别组与子节点的归属：

// 正确顺序
graph.setNode('group1', { label: '分组1' });
graph.setNode('nodeA', { label: '节点A' });
graph.setParent('nodeA', 'group1');

• 缺少关键布局配置
  dagre的布局参数会直接影响组的排列，比如rankdir（布局方向）、nodesep（节点间距）这些参数没设置对的话，组的位置会不符合预期。示例配置：

const layout = new dagre.layout();
layout.run(graph, {
  rankdir: 'TB', // 从上到下布局，可选值还有LR/RL/BT
  nodesep: 15,
  ranksep: 25
});

• 组节点未标记为集群类型
  部分dagre-d3-es版本需要明确将组节点标记为集群（cluster），否则会被当作普通节点处理：

graph.setNode('group1', { label: '分组1', cluster: true });

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