如何让D3.js树形图节点自动适配文本并调整尺寸？

核心思路 #

要实现节点矩形完全包裹自动换行的文本，需分两步：先让文本根据内容自动换行，再根据文本渲染后的实际尺寸动态调整矩形的宽高与位置。

针对D3.js v4.2.2的实现步骤 #

1. 自定义文本换行函数 #

通过拆分文本为单词，逐行拼接并判断宽度，实现自动换行：

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.4; // 行高系数，控制行间距
    const y = textEl.attr("y");
    const dy = parseFloat(textEl.attr("dy"));
    
    // 初始化第一行tspan
    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);
      }
    }
  });
}

2. 绘制节点并适配矩形尺寸 #

先渲染文本并执行换行，再根据文本的实际边界调整矩形：

// 假设treeData是你的树形数据，svg是已创建的SVG容器
const nodes = svg.selectAll(".node")
  .data(treeData)
  .enter()
  .append("g")
  .attr("class", "node")
  .attr("transform", d => `translate(${d.x},${d.y})`);

// 先添加矩形，初始尺寸设为0
nodes.append("rect")
  .attr("width", 0)
  .attr("height", 0)
  .attr("fill", "#ffffff")
  .attr("stroke", "#cccccc");

// 添加节点文本
const nodeText = nodes.append("text")
  .attr("dy", ".35em")
  .attr("text-anchor", "middle")
  .text(d => d.name);

// 执行文本换行，这里设置最大宽度为150px，可按需调整
nodeText.call(wrap, 150);

// 根据文本实际尺寸调整矩形
const padding = 8; // 文本与矩形的内边距
nodes.each(function() {
  const textBBox = d3.select(this).select("text").node().getBBox();
  d3.select(this).select("rect")
    .attr("width", textBBox.width + padding * 2)
    .attr("height", textBBox.height + padding * 2)
    .attr("x", -textBBox.width/2 - padding)
    .attr("y", -textBBox.height/2 - padding);
});

新版本D3.js（v7+）的简化方案 #

新版本中可借助原生SVG的text-wrap属性（现代浏览器支持良好）实现自动换行，无需自定义wrap函数，适配逻辑基本一致：

// 渲染文本时直接开启自动换行
const nodeText = nodes.append("text")
  .attr("dy", ".35em")
  .attr("text-anchor", "middle")
  .style("text-wrap", "wrap")
  .style("max-width", "150px")
  .text(d => d.name);

// 同样根据文本BBox调整矩形，代码同v4版本的适配部分

注意事项 #

• 需确保文本渲染完成后再获取getBBox()，若为异步加载数据，需在数据回调内执行适配逻辑；
• 动态更新树形图（如展开/折叠节点）时，需重新执行文本换行与矩形适配；
• 内边距和最大宽度可根据视觉需求灵活调整。

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