title: Redrawing word cloud with d3.wordcloud
body: <p>I'm using d3.wordcloud (<a href="https://github.com/wvengen/d3-wordcloud" rel="nofollow noreferrer">https://github.com/wvengen/d3-wordcloud</a>) and I'm trying to erase my current word cloud and draw a new one on button click. It works nicely for the first time the word cloud is drawn, but on each successive draw the font sizes get more and more out of order.</p>
  <p>Here's how it looks on the first run and after a couple successive runs:</p>
  <p><a href="https://i.stack.imgur.com/INu7j.jpg" rel="nofollow noreferrer">first run</a></p>
  <p><a href="https://i.stack.imgur.com/MFyqr.png" rel="nofollow noreferrer">last run</a></p>
  <p>Upon observation, I can see that the range of font sizes diminishes after each run, ultimately setting each word with a size of either 10 or 100. I believe the problem is happening in the function update in <a href="https://github.com/wvengen/d3-wordcloud/blob/master/d3.wordcloud.js" rel="nofollow noreferrer">d3.wordcloud.js</a>, but I'm not sure how to go on about solving this problem.</p>
  <pre><code>  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]);
         }
    }
  </code></pre>
  <p>The code I'm running is based on the <a href="https://github.com/wvengen/d3-wordcloud/blob/master/example/example.html" rel="nofollow noreferrer">example provided</a> in the repository, with a smaller word object for testing purposes and a button for redrawing the code.</p>
  <p>And here is a live demo:</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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();
          });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Word Cloud&lt;/title&gt;
      &lt;script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/lib/d3/d3.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/lib/d3/d3.layout.cloud.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.rawgit.com/wvengen/d3-wordcloud/master/d3.wordcloud.js"&gt;&lt;/script&gt;
      &lt;!-- &lt;script src="test_words.js"&gt;&lt;/script&gt; --&gt;
    &lt;/head&gt;
    &lt;body style="text-align: center"&gt;
      &lt;h1&gt;Word Cloud&lt;/h1&gt;
      &lt;div id='wordcloud'&gt;&lt;/div&gt;
      &lt;div id="dataset-picker"&gt;
        &lt;input id ="test" value="test" class="dataset-button" type="button"&gt;
      &lt;/div&gt;
        &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thank you.</p>