在 svg 文本路径上调整文本答案

【问题标题】：Fit text on svg textpath在 svg 文本路径上调整文本
【发布时间】：2025-11-20 18:00:03
【问题描述】：

我正在使用 D3.js 构建 a chart，它显示了有关员工能力的一些信息

如您所见，某些文本大于容器元素大小，因此，部分文本被剪切

我尝试动态更改文本字体大小，但这次尝试不是很成功：/

现在我的代码是这样的

.attr('font-size', function (d) {
              var defaultSize = 14;
              var angleForOneLetter = 1.14; // 
              console.log('angle=' + d.data.angle);
              console.log('length=' + d.data.name.length);
              console.log('str=' + d.data.name);

          if (angleForOneLetter * d.data.name.length > d.data.angle) {
              angleForOneLetter = d.data.angle / (d.data.name.length + 2);
              console.log('letter angle=' + angleForOneLetter + '\n \n');

              if (angleForOneLetter > 0.8) return 10;

              if (angleForOneLetter > 0.7) return 10;
              if (angleForOneLetter > 0.5) return 8;
              if (angleForOneLetter > 0.4) return 6;
              if (angleForOneLetter > 0.3) return 5;
              return 3;
          }
          console.log('letter angle=' + angleForOneLetter + '\n \n');
          return defaultSize;

});

它只适用于图表半径为580px;的情况

当图表半径变化时，我想要一种更好的方法来实现相同的目标并使文本适合边框

你可以在codepen上玩代码

【问题讨论】：

您的最终目标是否只是缩小文本以使其始终符合其界限？如果你这样做的话，大部分文本都会变得难以阅读。相反，我会保持所有文本大小相同，... 那些溢出的。然后我会添加一个鼠标悬停来显示全文。
是的，这是选项之一，但我仍然想知道，如何缩放文本以适应我的情况
@Mark 我怎么知道，如果文本溢出？

标签： d3.js svg

【解决方案1】：

如果您不关心文本的外观，只想强制它适应，您可以这样做：

...
.style('font-size', 14)
.each(function (d, i) {
  var self = d3.select(this),
    pathLen = d3.select("#outerArc" + i).node().getTotalLength();

    self.attr("textLength", pathLen)
    self.attr("lengthAdjust", "spacingAndGlyphs");
    self.attr("y", "50%");
    self.attr("x", "50%");
  });

更新codpen

【讨论】：

【解决方案2】：

你有没有尝试过类似的东西：

.text(function (d) {
    if (d.yourTextString.length > attrs.width/20) {
        //use a specific size;
    }
    else if (d.yourTextString.length > attrs.width/40) {
        //use another specific size;
    }
    else if (d.yourTextString.length > attrs.width/60) { ...

它很容易在任何图表上使用，因为它取决于图表大小，然后您可以调整/更改 /20 /40 /60 以满足您的需求，您可以使用 3 - 4 种不同的情况，应该足够了，如果您不需要用文本完美地填充图表。几周前我使用过类似的东西，为我工作，不确定这里是否足够。

【讨论】：