D3字云:如何自动调整字体大小，使单词不会耗尽，并将单词缩放到整个屏幕

D3 word-cloud: how to auto size the font so words will not run out , and to scale words to all the screen?

本文关键字：单词 缩放 屏幕 单词不 何自动 字云 调整 字体 D3      更新时间：2023-09-26

我正在使用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;
  }

我在这里使用this.divideBy布局大小:

 this.layout = d3.layout.cloud().size([that.w / that.divideBy, that.h /        that.divideBy])

有没有更聪明的算法?或者如何将g元素放到外部div中?

  • 设置字体大小后，文字不会用完，我想让文字覆盖所有的div，我可以在云出现在屏幕上后，通过(SVG宽度)/(g宽度)=宽度缩放，然后手动将宽度缩放应用到g元素。但是如何在javascript中做到这一点呢?

    • 要计算字体大小，必须创建如下比例:

    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);
      })

    适合你的屏幕边界/div:

    在。on("end"， drawCloud)函数中，调用这个函数:

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

    如果你想让文字根据父元素的宽度调整大小，那么这可能会有帮助

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

    r依赖于父元素

    不确定，如果这是你正在寻找的

    相关文章：