如何在D3.js中实现含tspan标签的多行文本两端对齐？

这个问题我之前也踩过坑——直接给text元素设text-anchor: justify对tspan行根本不起作用，因为每个tspan的默认宽度是自身文本的宽度，没法撑满父text的指定宽度。下面给你一套实用的实现方案：

核心思路 #

要实现两端对齐，我们需要：

• 给父text元素设置固定宽度和text-anchor: justify
• 让每个tspan的宽度等于父text的宽度
• 计算每行文本的实际宽度与目标宽度的差值，动态调整单词间距（或字母间距）来填充剩余空间

完整代码示例 #

假设你从JSON读取的是一段长文本，我们先把文本拆分成适配指定宽度的多行，再给每行tspan添加间距调整：

// 读取你的JSON数据
d3.json("your-description.json").then(data => {
  const svg = d3.select("svg");
  // 定义文本块的核心参数
  const textWidth = 400; // 你想要的文本块宽度
  const xPos = 50;       // 文本块的起始X坐标
  const yPos = 100;      // 第一行文本的Y坐标
  const lineHeight = 22; // 行高，控制每行的垂直间距

  // 创建父text元素，基础配置
  const textContainer = svg.append("text")
    .attr("x", xPos)
    .attr("y", yPos)
    .attr("text-anchor", "justify") // 开启对齐基础配置
    .style("font-size", "14px");

  // 先把长文本拆分成适配宽度的多行（辅助函数在下方）
  const textLines = wrapLongText(data.description, textWidth, textContainer.node());

  // 绑定多行数据，生成tspan元素
  textContainer.selectAll("tspan")
    .data(textLines)
    .enter()
    .append("tspan")
    .attr("x", xPos) // 每个tspan都对齐父text的X坐标
    .attr("dy", (_, idx) => idx === 0 ? 0 : `${lineHeight}px`) // 控制行间距
    .text(line => line)
    .each(function(lineContent) {
      const tspan = d3.select(this);
      const actualTextWidth = this.getComputedTextLength();
      
      // 只有当文本宽度小于目标宽度，且行内有多个单词时才调整间距
      if (actualTextWidth < textWidth && lineContent.trim().split(" ").length > 1) {
        const wordCount = lineContent.trim().split(" ").length - 1;
        // 计算每个单词之间需要额外添加的间距
        const extraSpacing = (textWidth - actualTextWidth) / wordCount;
        tspan.style("word-spacing", `${extraSpacing}px`);
      }
    });
});

// 辅助函数：将长文本按指定宽度拆分成多行
function wrapLongText(rawText, targetWidth, textNode) {
  const words = rawText.split(" ");
  const lines = [];
  let currentLine = words[0];

  for (let i = 1; i < words.length; i++) {
    const testLine = `${currentLine} ${words[i]}`;
    // 测试当前拼接后的文本宽度
    const testWidth = textNode.getComputedTextLength();
    if (testWidth < targetWidth) {
      currentLine = testLine;
    } else {
      lines.push(currentLine);
      currentLine = words[i];
    }
  }
  lines.push(currentLine);
  return lines;
}

关键细节说明 #

1. text-anchor的作用：父text的text-anchor: justify是基础，但它只对“占满宽度的文本块”生效，所以我们需要通过调整间距让tspan撑满宽度。
2. 动态间距计算：用getComputedTextLength()获取每行文本的真实宽度，把目标宽度和真实宽度的差值，平均分配到单词之间的间距（word-spacing），这样就能让文本两端对齐。
3. 单行特殊处理：如果某一行只有一个单词，没法用word-spacing调整，这种情况要么接受左对齐，要么用letter-spacing分摊间距（但视觉效果可能不太自然，按需选择）。
4. 预拆分的多行数据：如果你的JSON里已经是分好行的数组（比如data.descriptionLines = ["第一行", "第二行"]），直接跳过wrapLongText函数，把数组绑定到tspan即可。

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