使用d3-org-chart时能否将叶子节点改为上下排列而非水平并排？

d3-org-chart最底层节点纵向排列实现方案 #

内置配置说明

d3-org-chart目前没有内置支持单独将最底层节点设置为纵向排列的配置项，官方公开的可调参数仅覆盖全局布局方向、节点间距、缩放权限等通用属性，无法实现层级专属的布局规则自定义。

自定义实现方案

可以通过原生d3.js配合库的生命周期钩子实现该效果，核心实现思路如下：

• 定位最底层节点：在图表渲染完成的onRenderEnd回调中，遍历所有节点的depth属性找到最大层级值，筛选出所有最底层节点，再按父节点ID对这些节点做分组处理。
• 重算节点坐标：默认同层节点为x轴等差偏移、y轴数值统一的水平排列规则，你可以将同个父节点下的最底层节点修改为x轴和父节点对齐、y轴等差递增的纵向排列规则，间距可参考全局节点高度自定义，避免节点重叠。
• 修改坐标后需要同步更新连线，否则会出现连线错位问题
• 重绘连接路径：使用d3.linkVertical或自定义路径生成逻辑，重新计算最底层节点和对应父节点的连线路径属性，替换原有路径即可。
• 覆盖布局重算逻辑：如果你的项目开启了全局自动碰撞检测或布局重绘，需要在手动调整坐标后禁用对应层级的布局重算，避免修改后的坐标被全局逻辑复位。

基础示例代码

// 绑定图表渲染完成回调
chart.onRenderEnd(() => {
  // 获取全量节点数据
  const allNodes = chart.data();
  // 计算最大层级（即最底层节点的depth值）
  const maxDepth = Math.max(...allNodes.map(node => node.depth));
  // 按父节点分组存储最底层节点
  const leafNodeGroups = {};
  allNodes.forEach(node => {
    if (node.depth === maxDepth) {
      if (!leafNodeGroups[node.parentId]) {
        leafNodeGroups[node.parentId] = [];
      }
      leafNodeGroups[node.parentId].push(node);
    }
  });

  // 自定义纵向节点间距
  const verticalGap = 35;
  // 逐组调整最底层节点坐标
  Object.values(leafNodeGroups).forEach(group => {
    // 获取当前分组的父节点数据
    const parentNode = allNodes.find(item => item.id === group[0].parentId);
    group.forEach((node, index) => {
      // 水平对齐父节点，纵向依次排列
      node.x = parentNode.x;
      node.y = parentNode.y + parentNode.height + verticalGap * (index + 1);
      // 直接修改DOM节点的位置属性
      d3.select(`[node-id="${node.id}"]`).attr('transform', `translate(${node.x}, ${node.y})`);
    });
  });

  // 此处可补充连线重绘逻辑，按新的节点坐标更新path的d属性即可
})

注：上述代码为最简示例，实际使用时需要根据你项目的节点尺寸、全局布局参数做对应调整。

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