D3可折叠树文本超出图表区域及节点显示问题求助

一、根节点显示异常与固定起始位置 #

根节点显示异常、左内边距设置无效的核心原因是nodeSize布局会自动计算节点位置，无法固定根节点到左侧，同时初始位置与viewBox配置有误。

修复步骤：

1. 替换布局模式：将基于节点间距的nodeSize改为基于容器尺寸的size布局，确保根节点固定在左侧区域：

// 移除原dy计算，改用容器可用宽度定义树的水平范围
const tree = d3.tree()
  .size([height, width - marginLeft - marginRight]);

2. 修正根节点初始位置：

// 让根节点初始时垂直居中、左侧对齐（y坐标为左内边距）
root.x0 = height / 2;
root.y0 = marginLeft;

3. 调整viewBox更新逻辑，确保左内边距生效：

const transition = svg
  .transition()
  .duration(duration)
  .attr("height", height)
  .attr("viewBox", [0, left.x - marginTop, width, height])

二、长文本适配与防止超出显示区域 #

针对长文本超出问题，推荐两种方案：

方案1：自动换行显示 #

利用D3的文本换行功能（需D3 v7+），让长文本在节点内多行展示：

nodeEnter.append("text")
  .attr("dy", "0.31em")
  .attr("x", d => d._children ? -12 : 12) // 增加左右间距，给换行文本留空间
  .attr("text-anchor", d => d._children ? "end" : "start")
  .call(text => text.text(d => d.data.name)
    .wrap(d3.textWrap().width(100))) // 设置文本最大宽度，超出自动换行
  .clone(true)
  .lower()
  .attr("stroke-linejoin", "round")
  .attr("stroke-width", 3)
  .attr("stroke", "white");

方案2：文本截断省略 #

如果不需要换行，可设置最大字符数，超出部分显示省略号：

nodeEnter.append("text")
  .attr("dy", "0.31em")
  .attr("x", d => d._children ? -6 : 6)
  .attr("text-anchor", d => d._children ? "end" : "start")
  .text(d => {
    const maxLength = 15;
    return d.data.name.length > maxLength 
      ? `${d.data.name.slice(0, maxLength)}...` 
      : d.data.name;
  })
  .clone(true)
  .lower()
  .attr("stroke-linejoin", "round")
  .attr("stroke-width", 3)
  .attr("stroke", "white");

同时需调整列间距，预留文本空间：

const textMaxWidth = 120; // 根据最长文本设置
const dy = (width - marginLeft - marginRight - textMaxWidth) / (1 + root.height);

三、中间节点文本显示错误修复 #

中间节点文本显示异常，是因为节点展开/折叠时，文本的x坐标与对齐方式未同步更新。需在节点更新阶段补充属性设置：

const nodeUpdate = node
  .merge(nodeEnter)
  .transition(transition)
  .attr("transform", d => `translate(${d.y},${d.x})`)
  .attr("fill-opacity", 1)
  .attr("stroke-opacity", 1)
  .select("text")
  .attr("x", d => d._children ? -6 : 6)
  .attr("text-anchor", d => d._children ? "end" : "start");

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