D3.js弧(arc)/路径(path)内添加文本时textPath不显示如何解决？

原有代码核心问题 #

• 路径id赋值时多余添加了#符号，导致后续textPath无法正确关联路径
• 文本未根据弧形的中心角度做旋转，因此无法匹配弧的倾斜角度
• 直接使用selectAll('g')批量追加文本元素，会导致文本重复生成，位置逻辑错误

修正后的实现方案（textPath方案，自动适配弧角度、限定在弧内） #

mappedArcs.forEach((event) => {
  let data = mappedItems.find((d) => d.id == event.id);
  // 外层g统一做位移，避免子元素重复写translate
  const arcGroup = svgEl.append('g')
    .attr('class', 'arc-group')
    .attr('transform', 'translate(500,500)');

  // 生成弧形路径
  const arcPath = arcGroup.append('path')
    .attr('id', `arc-label-${event.id}`) // 去掉多余的#
    .attr('d', event.arcSvg)
    .style('fill', event.colour)
    .style('cursor', 'pointer')
    .on('mouseover', (e) => {
      setTextValue(event.title);
      setDateValue(data.startDate + ' - ' + data.endDate);
      setShowDiv(true);
    })
    .on('mouseout', (e) => {
      setShowDiv(false);
    })
    .on('click', (e) => {
      setDataObj({
        ...dataObj,
        title: data.title,
        description: data.description,
        start: data.startDate,
        end: data.endDate,
        location: data.location,
      });
      setIsModalOpen(true);
    });

  // 添加弧形文本
  const textEl = arcGroup.append('text')
    .attr('dy', event.innerRadius + (event.outerRadius - event.innerRadius)/2) // 垂直居中在弧的宽度中间
    .style('text-anchor', 'middle')
    .style('font', "12px 'Helvetica Neue'")
    .style('fill', 'black')
    .append('textPath')
    .attr('href', `#arc-label-${event.id}`) // 关联路径id，这里才加#
    .attr('startOffset', '50%') // 文本水平居中在弧长的中间
    .text(event.title);

  // 可选：如果文本长度超过弧长，自动缩小字号适配
  const arcLength = arcPath.node().getTotalLength();
  const textLength = textEl.node().getComputedTextLength();
  if (textLength > arcLength * 0.8) { // 留20%边距避免贴边
    const scale = (arcLength * 0.8) / textLength;
    textEl.style('font-size', `${12 * scale}px`);
  }
});

关键实现要点 #

• 所有弧形相关元素放在同一个group下做统一位移，减少重复代码和偏移误差
• 文本通过textPath直接绑定弧形路径，自动适配弧的曲率角度
• 增加了文本长度判断逻辑，自动缩小字号确保文本不会超出弧的范围
• 修正了id绑定的符号错误，确保路径和文本能正确关联

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