D3可折叠树多行文本换行异常问题求助

问题出在原wrap函数的行高计算逻辑，虽dy属性数值显示正常，但结合SVG的tspan定位规则，多行场景下会出现视觉间距异常。以下是修复后的函数：

function wrap(text, width) {
  text.each(function () {
    var text = d3.select(this),
      words = text.text().split(/\s+/).reverse(),
      word,
      line = [],
      lineCount = 0,
      lineHeight = 1, // ems，可按需调整行高
      x = text.attr("x"),
      y = text.attr("y"),
      // 读取文本自身的dy属性，避免忽略原有垂直偏移
      baseDy = parseFloat(text.attr("dy")) || 0,
      tspan = text.text(null)
        .append("tspan")
        .attr("x", x)
        .attr("y", y)
        .attr("dy", baseDy + "em");

    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        lineCount++;
        tspan = text.append("tspan")
          .attr("x", x)
          .attr("y", y)
          // 基于初始偏移+行数*行高计算绝对dy，保证每行定位统一
          .attr("dy", baseDy + lineCount * lineHeight + "em")
          .text(word);
      }
    }
  });
}

关键修改说明： #

• 新增baseDy变量，读取文本元素本身的dy属性（如存在），避免忽略原有垂直偏移设置
• 用lineCount替代原前置递增的lineNumber逻辑，确保行数计算准确无偏差
• 明确dy的计算规则为「初始偏移 + 行数×行高」，保证所有行的垂直间距一致

额外优化建议： #

• 若需调整行间距，直接修改lineHeight数值即可（比如设为1.1em增加行间距）
• 统一文本元素的dominant-baseline属性（通常设为alphabetic或auto），避免基线对齐差异导致的视觉偏差

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