如何在d3.js中强制设置树形图节点间距？

问题根源 #

你遇到的情况确实是d3.tree的内置布局逻辑导致的——separation()虽然能调整节点间距，但d3会优先保证连线不交叉、不重叠，当同层级节点的排列可能让连线挤在一起时，会自动拉开节点间距，哪怕你设置了分离系数，也会被这个兜底逻辑覆盖。

靠谱的解决思路 #

1. 手动强制修改节点坐标（最稳妥） #

放弃依赖separation()的自动计算，在布局跑完之后，直接给需要堆叠的节点赋值上一个同层级节点的y坐标：

// 先正常执行tree布局
const treeLayout = d3.tree();
treeLayout(root);

// 遍历同层级节点处理堆叠
root.children.forEach((node, idx) => {
  if (node.name.startsWith('_') && idx > 0) {
    // 把当前节点的y值改成前一个节点的y值，实现堆叠
    node.y = root.children[idx - 1].y;
  }
});

这种方式完全绕开d3的布局优化逻辑，不管其他节点怎么排列，目标节点都会和上一个节点重叠，100%生效。

2. 极端化separation函数（可选，视场景生效） #

如果想继续用separation()试试，可以把需要堆叠的节点分离系数设为0，但要注意，当d3判定连线可能冲突时，还是会调整间距，所以不一定万能：

const treeLayout = d3.tree()
  .separation((a, b) => {
    // 只要其中一个是需要堆叠的节点，间距设为0
    if (a.name.startsWith('_') || b.name.startsWith('_')) {
      return 0;
    }
    // 其他节点保持默认间距
    return 1;
  });

要是这个方法不管用，直接用第一种手动改坐标的方式就行。

3. 调整节点顺序辅助生效 #

把需要堆叠的节点放在目标节点的紧后面，比如把_f放在c之后，这样d3布局时更难触发连线冲突的判定，配合separation设0，更容易实现堆叠。不过这种方式需要调整输入数据的顺序，灵活性不如第一种。

额外提示 #

手动改完节点y坐标后，d3的连线生成逻辑会自动用新坐标绘制线条，不用额外调整连线代码；如果堆叠的节点有子节点，子树的布局会自动跟着父节点的新坐标调整，不会出问题。

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