D3.js 在svg文本路径上调整文本

我正在使用D3.js进行构建，其中显示了有关员工能力的一些信息

正如您所看到的，一些文本大于容器元素大小，因此，部分文本被剪切

我尝试通过友好方式更改文本字体大小，但这次尝试并不十分成功：/

现在我的代码看起来像这样

.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时有效

当图表半径变化时，我希望有更好的方法来实现相同的目标，并使文本适应边框

您可以在
上玩代码。您是否尝试了以下操作：

.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种不同的情况，如果你不需要完美地用文本填充图表，这应该足够了。
几周前我用过类似的东西，为我工作，不确定这里是否足够。
如果你不关心文本的外观，只是想强制它适合，你可以使用：

...
.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%");
  });

更新
您的最终目标是缩小文本的比例，使其始终符合其边界吗？如果你这样做的话，大部分的文字都会很小。相反，我会保持所有文本的大小相同，并且
…
那些溢出的文本。然后我会添加一个鼠标盖来显示全文。是的，这是选项之一，但我仍然想知道，如何缩放文本以适应我的case@Mark如果文本溢出，我怎么知道？