Updating the wordcloud

[MaximKhasiev]

I was googling a lot, but, unfortunately, I didn't find a solution for re-drawing the wordcloud. I tried various approaches, but I believe my knowledge is not enough to make it work (I'm naot a programmer at all).

First click on the button creates the wordcloud and second and all the next ones should update it, but not to create a new wordcloud as it is now.

Please help :) Here's the code I currently have:

$('#btn-wordcloud').click(function() {       
    if (codebtn_click_counter < 1) { alert("please hit Code Data button first");}
    else {

  words = [];
      wordscnt = [];
      var data = hot.getData();
      for (i=0; i<data.length;i++) {
          for(j=1; j<data[i].length; j++) {
              if (data[i][j]) {
                  if (words[data[i][j]]) {
                      words[data[i][j]]++;
                  } else {
                      words[data[i][j]] = 1;
                  }
              }
          }
      }

      for (word in words) {
          if (word != "None" && words[word] > 2) {
              var row = {"text": word.toUpperCase(), "size": words[word]*15}
              wordscnt.push(row)
          }
      }

      if (wordscnt.length > 0) {
          $('#data').hide();    
          var fill = d3.scale.category20();
          maxSize = d3.max(wordscnt, function(d) { return d.size; });
          minSize = d3.min(wordscnt, function(d) { return d.size; });

        var fontScale = d3.scale.linear() // scale algo which is used to map the domain to the range
          .domain([minSize, maxSize]) //set domain which will be mapped to the range values
          .range([15,80]); // set min/max font size (so no matter what the size of the highest word it will be set to 40 in this case)

          if (codebtn_click_counter >= 1 && click_counter == 0){
          click_counter = ++click_counter;
          d3.layout.cloud().size([1000, 500])
              .words(wordscnt.sort(sortWordCountObject))
              //.rotate(function() { return ~~(Math.random() * 2) * 90; })
              .padding(5)
              .rotate(0)
              .font("Impact")
              //.fontSize(function(d) { return d.size; })
              .fontSize(function(d) { return fontScale(d.size) })
              .on("end", draw)
              .start(); } 

              else {

            // How do I make the wordcloud update function here?

              };

          function draw(words) {
              d3.select("#drawing").append("svg")
              .attr("width", 1000)
              .attr("height", 500)
              .append("g")
              .attr("transform", "translate(500,250)")
              .selectAll("text")
              .data(words)
              .enter().append("text")
              .style("font-size", function(d) { return d.size + "px"; })
              .style("font-family", "Expressway")
               //* .style("fill", function(d, i) { return fill(i); }) *//
              .attr("text-anchor", "middle")
              .attr("transform", function(d) {
                  return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                })
                .text(function(d) { return d.text; });

          }

    }
                                                                                 }

});

[jasondavies]

Please post general D3/JavaScript help requests to StackOverflow/elsewhere.