D3.js图表legend图例长文本调用wrap换行失效如何解决

你调用wrap方法不生效的核心原因有两个：一是通用D3文本换行函数需要传入单条文本允许的最大宽度参数，你调用时未传参；二是SVG原生<text>标签不识别\n换行符，你之前把&nbsp替换为\n的写法本身无法产生换行效果。

第一步：实现可用的文本换行函数 #

这个函数会逐单元拆分文本，实时计算渲染宽度，超出阈值时自动生成<tspan>标签实现换行，同时自动处理行高偏移：

function wrap(text, maxWidth) {
  text.each(function() {
    const textEl = d3.select(this);
    let words = textEl.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineHeight = 1.2, // 可根据字号自行调整行高
        y = textEl.attr("y"),
        dy = parseFloat(textEl.attr("dy")),
        tspan = textEl.text(null)
          .append("tspan")
          .attr("x", textEl.attr("x"))
          .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", textEl.attr("x"))
          .attr("y", y)
          .attr("dy", lineHeight + "em")
          .text(word);
      }
    }
  });
}

第二步：调整原有图例代码 #

调用wrap时传入你预留的单条图例文本最大可用宽度，去掉无效的\n替换逻辑：

// 根据你的图例预留空间调整这个宽度值
const legendTextMaxWidth = 80;

legend.append("text")      
  .attr("x", (x, i) => (padding.top * 2 + labHeight * i) + 60)
  .attr("y", 9)
  .attr("font-size", "0.65rem")
  .attr("dy", ".35em")      
  .style("text-anchor", "start")
  .text(function (d) { return d.replace("&nbsp", " "); })
  .call(wrap, legendTextMaxWidth);

适配注意事项 #

• 原代码中图例组的transform偏移是硬编码的索引判断逻辑，换行后文本总高度会增加，需要调整原来固定的height - 190垂直定位值，避免多行文本和图表其他内容重叠，有条件的话可以改成渲染后读取每个legend组的实际高度动态计算偏移。
• 如果你的图例文本是中文（无空格分词），把wrap函数里的拆分逻辑从按空格拆改成按单字拆分即可：将let words = textEl.text().split(/\s+/).reverse()替换为let words = [...textEl.text()].reverse()。
• 不要在SVG<text>标签内尝试用CSS的word-break、line-height属性直接实现换行，这些属性对SVG原生文本标签不生效，必须通过<tspan>拆分实现多行。

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