Question

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

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

我尝试用dinamically更改文本字体大小，但此试用版不太成功：/

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

.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

上的代码

Answer 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

Answer 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个不同的情况和它应该足够了，如果你不需要用文字完美地填充图表。几个星期前我用过这样的东西，为我工作，不知道这里是否足够。

在svg textpath上适合文本

2 个答案: