如何解决D3可折叠树根节点文本动态marginLeft及节点显示问题？

1. 动态计算根节点所需左侧边距 #

手动调整marginLeft无法适配不同长度的根节点文本，可通过临时渲染根节点文本获取宽度，再动态设置边距，同时固定根节点起始位置：

// 临时渲染根节点文本以获取实际宽度
const rootText = svg.append("text")
  .text(d => d.data.name)
  .style("visibility", "hidden");

const rootTextWidth = rootText.node().getBBox().width;
rootText.remove();

// 固定根节点文本起始位置，动态调整边距
const fixedRootStartX = 20;
const margin = {
  top: 20,
  right: 120,
  bottom: 20,
  left: fixedRootStartX
};

// 调整容器宽度，避免根节点文本超出范围
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;

// 初始化树布局
const tree = d3.tree().size([height, width]);

2. 让长文本在固定尺寸内可见 #

针对长文本，提供两种适配方案：

方案一：自动换行 #

通过自定义wrap函数将长文本拆分为多行，避免超出容器：

// 文本换行函数
function wrap(text, maxWidth) {
  text.each(function() {
    const textEl = d3.select(this);
    const words = textEl.text().split(/\s+/).reverse();
    let word;
    let line = [];
    let lineNumber = 0;
    const lineHeight = 1.1;
    const y = textEl.attr("y");
    const dy = parseFloat(textEl.attr("dy"));
    let tspan = textEl.text(null).append("tspan")
      .attr("x", 0)
      .attr("y", y)
      .attr("dy", dy + "em");

    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > maxWidth) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = textEl.append("tspan")
          .attr("x", 0)
          .attr("y", y)
          .attr("dy", ++lineNumber * lineHeight + dy + "em")
          .text(word);
      }
    }
  });
}

// 渲染节点文本后调用换行函数
nodeEnter.append("text")
  .attr("x", d => d.children || d._children ? -13 : 13)
  .attr("dy", ".35em")
  .attr("text-anchor", d => d.children || d._children ? "end" : "start")
  .text(d => d.data.name)
  .call(wrap, 150); // 设定每行最大宽度，可根据容器调整

方案二：动态调整节点X偏移 #

若不需要换行，可根据文本宽度调整节点X位置，确保文本不超出容器：

nodeEnter.append("text")
  .attr("x", d => d.children || d._children ? -13 : 13)
  .attr("dy", ".35em")
  .attr("text-anchor", d => d.children || d._children ? "end" : "start")
  .text(d => d.data.name)
  .each(function(d) {
    const textWidth = this.getComputedTextLength();
    const containerWidth = width + margin.left + margin.right;
    // 右侧超出时调整节点位置
    if (d.x0 + textWidth > containerWidth) {
      d.x0 = containerWidth - textWidth - 10;
    }
    // 强制根节点固定在起始位置
    if (d.depth === 0) {
      d.x0 = margin.left;
    }
  });

3. 确保根节点始终从固定位置开始 #

树布局计算完成后，强制修正根节点X坐标，并同步调整所有子节点位置，保持树结构完整：

const root = tree(d3.hierarchy(data));
const fixedRootX = margin.left;
const xOffset = root.x - fixedRootX;

// 批量调整所有节点X坐标
root.each(d => {
  d.x -= xOffset;
});

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