如何用D3.js实现SVG边标签按逗号拆分多行显示？

针对将逗号分隔的边标签拆分为单独一行、保持可读且沿路径居中的需求，无需第三方库，以下是修改后的实现方案：

问题分析 #

原代码的核心问题：

1. 换行逻辑不符合需求：wrap函数按空格拆分单词并根据宽度换行，不满足“按逗号拆分标签为单独一行”的要求
2. 元素结构不匹配：wrap被调用在textPath元素上，但函数逻辑针对普通text元素操作tspan，textPath无x/y属性，导致逻辑失效
3. 缺少多行居中设置：未处理每行文本的居中对齐

修改后的代码 #

// 可选：如果单个标签过长需要按宽度自动换行，保留此函数
function wrapSingleLabel(tspan, width) {
  const text = tspan.text();
  const words = text.split(/\s+/).reverse();
  let word;
  let line = [];
  let lineNumber = 0;
  const lineHeight = 1.2;
  let currentTspan = tspan;
  currentTspan.text(null);
  
  while ((word = words.pop())) {
    line.push(word);
    currentTspan.text(line.join(" "));
    if (currentTspan.node().getComputedTextLength() > width) {
      line.pop();
      currentTspan.text(line.join(" "));
      line = [word];
      currentTspan = tspan.parent()
        .append("tspan")
        .attr("dy", ++lineNumber * lineHeight + "em")
        .attr("text-anchor", "middle")
        .text(word);
    }
  }
}

const edgelabels = svg
  .selectAll(".edgelabel")
  .data(links)
  .enter()
  .append("text")
  .style("pointer-events", "none")
  .attr("class", "edgelabel")
  .attr("id", (d, i) => `edgelabel${i}`)
  .attr("font-size", 20)
  .attr("fill", "#9c28b0")
  .append("textPath")
  .attr("xlink:href", (d, i) => `#edgepath${i}`)
  .attr("startOffset", "50%") // 整体标签块沿路径居中
  .each(function(d, i) {
    const textPath = d3.select(this);
    const labels = EL[i].split(/,\s*/); // 按逗号（含后续可选空格）拆分标签
    textPath.text(null); // 清空默认文本
    
    labels.forEach((label, idx) => {
      const tspan = textPath.append("tspan")
        .text(label)
        .attr("dy", idx === 0 ? "1.2em" : `${1.2 * (idx + 1)}em`) // 每行设置垂直偏移
        .attr("text-anchor", "middle"); // 每行文本居中
      
      // 可选：单个标签过长时调用自动换行，传入宽度阈值，比如50
      // wrapSingleLabel(tspan, 50);
    });
  });

关键修改点 #

1. 标签拆分逻辑：用split(/,\s*/)将逗号分隔的标签拆分为独立元素，确保每个标签单独占一行
2. 多行布局：为每个tspan设置递增的dy属性实现垂直换行，保持每行的行高一致
3. 居中处理：给每个tspan添加text-anchor: middle，确保每行文本沿路径居中对齐
4. 可选扩展：保留wrapSingleLabel函数，可对过长的单个标签进行单词自动换行

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