React中d3-org-chart节点自动重排：如何实现同层级节点单行展示？

问题背景 #

使用d3-org-chart构建React组织架构图时，节点会自动重排（如根节点子节点初始不在同一行，展开后位置变化），需要让所有同层级节点始终保持在同一水平行。

解决步骤 #

核心是修改d3-org-chart的布局配置，禁用紧凑布局并强制树状排列：

1. 切换布局模式为树状布局
   移除原代码中的.compactMarginBetween()配置，显式设置.layout("tree")，该布局会强制同层级节点在同一水平线上：

   .layout("tree")
   

2. 设置固定的同层级节点间距
   使用.marginBetween()替代紧凑布局的间距配置，指定同层级节点间的固定水平距离：

   .marginBetween((d) => 80) // 可根据节点宽度调整数值
   

3. 添加间距规则确保布局稳定
   可选：通过.separation()方法明确同层级节点的间距比例，避免意外重排：

   .separation((a, b) => {
     // 同层级节点间距保持固定比例，不同层级可适当缩小
     return a.parent === b.parent ? 1 : 0.5;
   })
   

修改后的完整配置代码 #

useLayoutEffect(() => {
  const toggleDetailsCard = (nodeId) => {
    handleShow();
    setEmployeeId(nodeId);
  };
  const chart = new OrgChart();
  if (props.data && d3Container.current) {
    chart
      .container(d3Container.current)
      .data(props.data)
      .nodeWidth((d) => 300)
      .nodeHeight((d) => 150)
      .layout("tree")
      .marginBetween((d) => 80)
      .separation((a, b) => a.parent === b.parent ? 1 : 0.5)
      .onNodeClick((d) => {
        toggleDetailsCard(d);
      })
      .buttonContent((node, state) => {
        return ReactDOMServer.renderToStaticMarkup(
          <CustomExpandButton {...node.node} />
        );
      })
      .nodeContent((d) => {
        return ReactDOMServer.renderToStaticMarkup(
          <CustomNodeContent {...d} />
        );
      })
      .render();
  }
}, [props, props.data]);

原理说明 #

d3-org-chart的默认compact布局会根据节点子节点数量动态调整位置以节省空间，而tree布局采用传统树状排列逻辑，同层级节点始终保持水平对齐。固定的marginBetween和明确的separation规则会确保节点位置不会随子节点展开/折叠发生变化。

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