Question

我正在使用d3.wordcloud（https://github.com/wvengen/d3-wordcloud），我正在尝试删除当前的文字云，并在按钮点击时绘制一个新文字云。第一次绘制文字云时效果很好，但在每次连续绘制时，字体大小变得越来越乱。

以下是第一次运行和连续几次运行后的样子：

first run

last run

观察后，我可以看到每次运行后字体大小的范围减小，最终将每个单词的大小设置为10或100.我相信问题发生在d3.wordcloud.js的函数更新中，但我不知道如何继续解决这个问题。

  function update() {
     var words = layout.words();
     fontSize = d3.scale[scale]().range([10, 100]);

     if (words.length) {
         fontSize.domain([+words[words.length - 1].size || 1, +words[0].size]);
       }
  }

我正在运行的代码基于存储库中的example provided，用于测试目的的较小的单词对象和用于重绘代码的按钮。

这是一个现场演示：

var test_words = [
        {text: 'have', size: 102},
        {text: 'Oliver', size: 47},
        {text: 'say', size: 46},
        {text: 'said', size: 36},
        {text: 'bumble', size: 29, href: 'https://en.wikipedia.org/wiki/Beadle'},
        {text: 'will', size: 29},
        {text: 'Mrs', size: 56, href: 'https://en.wikipedia.org/wiki/Mrs.'},
        {text: 'Mann', size: 27, href: 'http://educationcing.blogspot.nl/2012/06/oliver-twist-mrs-manns-character.html'},
        {text: 'Mr', size: 27},
        {text: 'very', size: 26},
        {text: 'child', size: 20},
        {text: 'all', size: 19},
        {text: 'boy', size: 19},
        {text: 'gentleman', size: 19, href: 'http://www.thefreelibrary.com/The+gentleman+in+the+white+waistcoat%3a+Dickens+and+metonymy.-a0154239625'},
        {text: 'great', size: 19},
        {text: 'take', size: 19},
        {text: 'but', size: 18},
        {text: 'beadle', size: 16},
        {text: 'twist', size: 16},
        {text: 'board', size: 15},
        {text: 'more', size: 15},
        {text: 'one', size: 15}
      ];
      
d3.wordcloud()
        .size([600, 275])
        .transitionDuration(1000)
        .fill(d3.scale.ordinal().range(["#884400", "#448800", "#888800", "#444400"]))
        .words(test_words)
        .onwordclick(function(d, i) {
          if (d.href) { window.location = d.href; }
        })
        .start();

      d3.select('#dataset-picker').selectAll('.dataset-button')
        .on("click", function() {
          //clear the wordcloud div
          document.getElementById("wordcloud").innerHTML = "";
          var a2 = d3.wordcloud()
            .size([600, 275])
            .transitionDuration(1000)
            .fill(d3.scale.ordinal().range(["#884400", "#448800", "#888800", "#444400"]))
            .words(test_words)
            .onwordclick(function(d, i) {
              if (d.href) { window.location = d.href; }
            })
            .start();
        });

<html>
  <head>
    <meta charset="UTF-8">
    <title>Word Cloud</title>
    <script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/lib/d3/d3.js"></script>
    <script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/lib/d3/d3.layout.cloud.js"></script>
    <script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/d3.wordcloud.js"></script>
    <!-- <script src="test_words.js"></script> -->
  </head>
  <body style="text-align: center">
    <h1>Word Cloud</h1>
    <div id='wordcloud'></div>
    <div id="dataset-picker">
      <input id ="test" value="test" class="dataset-button" type="button">
    </div>
      </body>
</html>

谢谢。

Answer 1

这有点棘手。 product description插件（更确切地说是基础d3-wordcloud插件）将修改单词的输入数据集以适应单词的大小。

渐渐地，某些词会越来越大，而其他词会越来越小。

为避免这种情况，您可以在每次使用function deepCopy(oldValue) { var newValue strValue = JSON.stringify(oldValue) return newValue = JSON.parse(strValue) }原始数据集创建新云时提供插件。这样原始数据集始终保持不变：

这是一种使用javascript深度复制json的方法：

.words(deepCopy(test_words))

你以这种方式传递给wordcloud插件：

var test_words = [
        {text: 'have', size: 102},
        {text: 'Oliver', size: 47},
        {text: 'say', size: 46},
        {text: 'said', size: 36},
        {text: 'bumble', size: 29, href: 'https://en.wikipedia.org/wiki/Beadle'},
        {text: 'will', size: 29},
        {text: 'Mrs', size: 56, href: 'https://en.wikipedia.org/wiki/Mrs.'},
        {text: 'Mann', size: 27, href: 'http://educationcing.blogspot.nl/2012/06/oliver-twist-mrs-manns-character.html'},
        {text: 'Mr', size: 27},
        {text: 'very', size: 26},
        {text: 'child', size: 20},
        {text: 'all', size: 19},
        {text: 'boy', size: 19},
        {text: 'gentleman', size: 19, href: 'http://www.thefreelibrary.com/The+gentleman+in+the+white+waistcoat%3a+Dickens+and+metonymy.-a0154239625'},
        {text: 'great', size: 19},
        {text: 'take', size: 19},
        {text: 'but', size: 18},
        {text: 'beadle', size: 16},
        {text: 'twist', size: 16},
        {text: 'board', size: 15},
        {text: 'more', size: 15},
        {text: 'one', size: 15}
      ];

      function deepCopy(oldValue) { 
        var newValue
        strValue = JSON.stringify(oldValue)
        return newValue = JSON.parse(strValue)
      }

      var cloud = d3.wordcloud()
        .size([500, 275])
        .transitionDuration(1000)
        .fill(d3.scale.ordinal().range(["#884400", "#448800", "#888800", "#444400"]))
        .words(deepCopy(test_words))
        .onwordclick(function(d, i) {
          if (d.href) { window.location = d.href; }
        })
        .start();

      d3.select('#dataset-picker').selectAll('.dataset-button')
        .on("click", function() {
          //clear the wordcloud div
          // cloud.remove();
          document.getElementById("wordcloud").innerHTML = "";
          var cloud = d3.wordcloud()
            .size([500, 275])
            .transitionDuration(1000)
            .fill(d3.scale.ordinal().range(["#884400", "#448800", "#888800", "#444400"]))
            .words(deepCopy(test_words))
            .onwordclick(function(d, i) {
              if (d.href) { window.location = d.href; }
            })
            .start();
        });

这是一个演示：

<html>
  <head>
    <meta charset="UTF-8">
    <title>Word Cloud</title>
    <script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/lib/d3/d3.js"></script>
    <script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/lib/d3/d3.layout.cloud.js"></script>
    <script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/d3.wordcloud.js"></script>
  </head>
  <body style="text-align: center">
    <h1>Word Cloud</h1>
    <div id='wordcloud'></div>
    <div id="dataset-picker">
      <input id ="test" value="test" class="dataset-button" type="button">
    </div>
      </body>
</html>

textContentType

重绘与d3.wordcloud的词云

1 个答案: