Javascript D3 word cloud：如何自动调整字体大小，使文字不会用完，并将文字缩放到所有屏幕？

我正在使用Jason Davies d3-cloud.js来实现我的word cloud

1.只要初始窗口大小太小，单词就会消失。 因此，我有一个函数，可以计算单词大小所需的像素，但我使用的是if-else条件，它并不总是有效的：

_.forEach(data, function (word) {
  pixNeeded += that.wordService.calcFontSize(word.id) * word.text.length;
});

that.divideBy = pixNeeded < 7000 ? 2.5
  : pixNeeded < 9000 ? 2
  : pixNeeded < 12000 ? 1.7
  : pixNeeded < 13000 ? 1.6
  : pixNeeded < 15000 ? 1.5
  : pixNeeded < 16000 ? 1.4
  : pixNeeded < 17000 ? 1.3
  : 1;

if (that.h<600 ||that.w<500) // little window handling
{
  that.divideBy=1;
  that.scale=0.8;
  if(pixNeeded>15000) { //small window+lots of words handling by shrink font
    that.wordService.fontMax = 24;
    that.wordService.fontMin = 8;
  }

有更聪明的算法吗？或者如何将g元素安装到外部div

在设置字体大小以使单词不会用完后，我希望单词将覆盖所有div，我可以在云显示在屏幕上后，通过（SVG宽度）/（g宽度）=宽度缩放，然后手动将宽度缩放应用于g元素。但是如何在javascript中做到这一点呢

---

如果希望单词根据父元素的宽度调整大小，那么这可能会有所帮助

.style("font-size", function(d) { return Math.min(2 * r, (2 * r - 8) / this.getComputedTextLength() * 24) + "px"; });

r依赖于父元素

---

不完全确定，如果这是计算字体大小所需的，则必须创建此比例：

var fontSizeScale = d3.scale.pow().exponent(5).domain([0,1]).range([ minFont, maxFont]);

并在fontSize函数中调用它：

var maxSize = d3.max(that.data, function (d) {return d.size;});

// on the d3.layout.cloud()
  .fontSize(function (d) {
        return fontSizeScale(d.size/maxSize);
      })

function zoomToFitBounds() {

      var X0 = d3.min( words, function (d) {
        return d.x - (d.width/2);
      }),
        X1 = d3.max( words, function (d) {
          return d.x + (d.width/2);
        });

      var Y0 = d3.min( words, function (d) {
          return d.y - (d.height/2);
        }),
        Y1 = d3.max( words, function (d) {
          return d.y + (d.height/2);
        });

      var scaleX = (X1 - X0) / (width);
      var scaleY = (Y1 - Y0) / (height);

      var scale = 1 / Math.max(scaleX, scaleY);

      var translateX = Math.abs(X0) * scale;
      var translateY = Math.abs(Y0) * scale;

      cloud.attr("transform", "translate(" +
        translateX + "," + translateY + ")" +
        " scale(" + scale + ")");
}

要使边界适合您的屏幕/分区，请执行以下操作：

在.on（“end”，drawCloud）函数中，调用此函数：

var maxSize = d3.max(that.data, function (d) {return d.size;});

// on the d3.layout.cloud()
  .fontSize(function (d) {
        return fontSizeScale(d.size/maxSize);
      })

function zoomToFitBounds() {

      var X0 = d3.min( words, function (d) {
        return d.x - (d.width/2);
      }),
        X1 = d3.max( words, function (d) {
          return d.x + (d.width/2);
        });

      var Y0 = d3.min( words, function (d) {
          return d.y - (d.height/2);
        }),
        Y1 = d3.max( words, function (d) {
          return d.y + (d.height/2);
        });

      var scaleX = (X1 - X0) / (width);
      var scaleY = (Y1 - Y0) / (height);

      var scale = 1 / Math.max(scaleX, scaleY);

      var translateX = Math.abs(X0) * scale;
      var translateY = Math.abs(Y0) * scale;

      cloud.attr("transform", "translate(" +
        translateX + "," + translateY + ")" +
        " scale(" + scale + ")");
}

---

这是什么。getComputedTextLength（）？这是一个SVG方法，它的官方文档说“返回呈现给定文本元素中所有字符的所有高级值的总和。”……基本上，它返回文本的长度和0如果文本没有呈现，那么minSize和maxSize来自哪里？我想你是指minFont，maxFont？它们对应于OP的fontMax和fontMin。Racheli的fontSizeScale将域[0,1]映射到所需的字体大小范围[8,24]，如果这是您所询问的。