D3 treemap中直接在svg添加text导致文本不可读的修复方案问询

核心问题说明 #

你推测的文本挂载位置不对是主要原因之一，另外还有两个常见错误：

• SVG 原生 <text> 元素不支持 overflow、max-width 这类 HTML CSS 属性，设置后也不会生效
• 文本和矩形没有绑定到同一个分组，层级和坐标容易错位

修复步骤 #

• 第一步：重构 DOM 层级，为每个叶子节点创建分组容器
  不要分别创建 rect 和 text 节点，先给每个叶子节点 append 一个 <g> 元素，把对应 rect 和 text 都放在这个分组下，坐标可以统一继承，也保证文本在对应矩形的上层。
• 第二步：添加文本裁剪/换行逻辑
  可以通过两种方式处理文本超出矩形的问题：一是给每个分组绑定 clipPath，把超出矩形范围的内容裁掉；二是计算文本宽度，自动换行或者截断过长的文本。
• 第三步：修正原有文本创建逻辑

修正后代码示例 #

// 1. 先为每个叶子节点创建分组
const leafGroups = svg
  .selectAll("g.leaf")
  .data(root.leaves())
  .enter()
  .append("g")
  .attr("class", "leaf")
  // 分组统一平移，子元素不用重复计算x0/y0偏移
  .attr("transform", d => `translate(${d.x0}, ${d.y0})`);

// 2. 在分组下先加rect（保证text在rect上层显示）
leafGroups.append("rect")
  .attr("width", d => d.x1 - d.x0)
  .attr("height", d => d.y1 - d.y0)
  .attr("fill", "原有填充色")
  // 其余rect原有属性保持不变即可

// 3. 在同一个分组下加text，坐标基于分组内部计算
const text = leafGroups.append("text")
  .attr("x", 10)
  .attr("y", 20)
  .attr("font-size", "12px")
  .attr("fill", "white");

// 4. 处理文本换行，根据矩形宽度自动截断
text.each(function(d) {
  const rectWidth = d.x1 - d.x0 - 20; // 减去左右边距的可用宽度
  const textContent = d.data.name;
  const textNode = d3.select(this);
  textNode.text(null);

  let currentLine = "";
  let lineNumber = 0;
  const lineHeight = 1.2;
  const words = textContent.split(""); // 英文场景可替换为按空格拆分

  for (let i = 0; i < words.length; i++) {
    currentLine += words[i];
    const tspan = textNode.append("tspan")
      .attr("x", 10)
      .attr("dy", lineNumber === 0 ? 0 : lineHeight + "em")
      .text(currentLine);
    // 检测当前行宽度是否超过可用宽度
    if (tspan.node().getComputedTextLength() > rectWidth) {
      tspan.remove();
      currentLine = currentLine.slice(0, -1);
      textNode.append("tspan")
        .attr("x", 10)
        .attr("dy", lineNumber === 0 ? 0 : lineHeight + "em")
        .text(currentLine + "..."); // 超出范围补充省略号
      break;
    }
    tspan.text(currentLine);
  }
})

修改后每个文本和对应的矩形绑定在同一个分组下，不会出现文本错位跑到其他矩形上的问题，同时通过计算文本宽度的方式实现了超出截断，保证文本都在对应矩形范围内可阅读。

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