title: Wordcloud update data/ working example of adding words to cloud?
body: <p>I am still pretty new to d3.js and I am diving into a wordcloud example using the 
  d3-cloud repo : <a href="https://github.com/jasondavies/d3-cloud" rel="nofollow">https://github.com/jasondavies/d3-cloud</a></p>
  
  <p>The example which is in there works for me, I turned it into a function so I can call it when data updates:</p>
  
  <pre><code>  wordCloud : function(parameters,elementid){
  
          var p = JSON.parse(JSON.stringify(parameters));
          var fill = d3.scale.category20(); 
  
          if (d3.select(elementid).selectAll("svg")[0][0] == undefined){
              var svg = d3.select(elementid).append("svg")
                      .attr("width", 500)
                      .attr("height", 500)
                      .append("g")
                      .attr("transform", "translate(300,300)");        
          }else var svg =  d3.select(elementid).selectAll("svg")
                  .attr("width", 500)
                  .attr("height", 500)
                  .select("g")
                  .attr("transform", "translate(300,300)");
  
  
          d3.layout.cloud().size([300, 300])
                  .words(p.data)
                  .padding(5)
                  .rotate(function(d) {return ~~(Math.random()) *  p.cloud.maxrotation; })
                  .font("Impact")
                  .fontSize(function(d) { return d.size; })
                  .on("end", draw)
                  .start();
  
          function draw(words) {
              console.log(words)
              console.log(words.length)
              svg.selectAll("text")
                      .data(words)
                      .enter().append("text")
                      .style("font-size", function(d) {return d.size + "px"; })
                      .style("font-family", "Impact")
                      .style("fill", function(d, i) { return fill(i); })
                      .attr("text-anchor", "middle")
                      .text(function(d) {console.log("enter text " + d.text) ; return d.text; });
  
              svg.selectAll("text")
                      .data(words).transition().duration(2000).attr("transform", function(d) {
                          return "translate(" + [d.x, d.y] + ")rotate(" + Math.random() *  p.cloud.maxrotation + ")";
              })
  
          } 
      }   
  </code></pre>
  
  <p>The code works for me. 
  element id = the elements you bind to
  parameters = all parameters which i should be able to set, including data (parameters.data). </p>
  
  <p>Except for the packaging the code wasn't altered much from the original:
  <a href="https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html" rel="nofollow">https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html</a></p>
  
  <p>However when I add a new word to the wordcloud (so when I update the data), the new word is not recognized. I have put log output on several places and apparently in the draw function the data is incorrect but before it is ok. </p>
  
  <p>for example:
  original: <code>[{"text":"this","size":5},{"text":"is","size":10},{"text":"a","size":50},{"text":"sentence","size":15}]</code>
  (the code adds other properties but this is for simplicity of explanation)</p>
  
  <p>I add: "testing" with a size of 5</p>
  
  <p>correct would be</p>
  
  <pre><code>[{"text":"this","size":5},{"text":"is","size":10},{"text":"a","size":50},{"text":"sentence","size":15},{"text":"testing","size":5}]
  </code></pre>
  
  <p>but I get results like:</p>
  
  <pre><code>[{"text":"a","size":50},{"text":"testing","size":5},{"text":"this","size":5},{"text":"sentence","size":15}]
  </code></pre>
  
  <p>--> new word added , an older one removed (don't know why) and array was mixed up.</p>
  
  <p>QUESTION: </p>
  
  <ol>
  <li>Anybody have an idea what I am doing wrong? </li>
  </ol>
  
  <p>or </p>
  
  <ol start="2">
  <li>Does anybody have a working example of a d3.js wordcloud which you can update with new words by means of lets say an input box? </li>
  </ol>