如何在D3 v3员工层级图中实现子节点垂直展开？

要解决父节点子节点过多导致横向视图过长的问题，只需修改D3 tree布局的坐标计算和路径生成逻辑，就能实现子节点垂直堆叠的效果，具体修改步骤如下：

1. 调整Tree布局配置 #

将默认的横向布局改为按垂直方向分配节点空间，通过nodeSize控制节点间距，并调整同层级节点的分离规则：

// 替换原tree布局初始化代码
var tree = d3.layout.tree()
  .nodeSize([80, 120]) // 第一个值为节点水平宽度，第二个为垂直方向的节点间距
  .separation(function(a, b) {
    // 同父节点的子节点间距设为1，不同父节点的子节点间距设为2，根据节点深度动态调整
    return (a.parent === b.parent ? 1 : 2) / a.depth;
  });

2. 交换节点的x、y坐标 #

D3 tree布局默认以x为水平轴、y为垂直轴，交换两者坐标可将子节点的横向排列转为垂直堆叠：

// 生成节点数据后执行坐标交换
var nodes = tree.nodes(root).reverse();
nodes.forEach(function(d) {
  var temp = d.x;
  d.x = d.y;
  d.y = temp;
  // 若希望子节点与父节点水平对齐，可添加以下代码
  // if (d.parent) d.x = d.parent.x;
});

3. 修改链接路径生成器 #

同步调整对角线生成器的投影规则，确保链接路径适配垂直布局：

// 替换原diagonal生成代码
var diagonal = d3.svg.diagonal()
  .projection(function(d) { return [d.y, d.x]; });

4. 适配SVG容器尺寸 #

由于垂直展开会增加视图高度，需根据节点最大垂直位置动态调整SVG高度，避免内容被截断：

var maxVerticalPos = d3.max(nodes, function(d) { return d.y; });
svg.attr("height", maxVerticalPos + 100); // 100为底部边距，可按需调整

补充说明 #

• 若节点文本出现排版问题，可微调text元素的x和text-anchor属性，确保文本在节点旁正确显示；
• 可根据实际需求修改nodeSize的数值，平衡节点间距和整体视图紧凑度。

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