D3.jsのワードクラウドの更新に関するヘルプが必要

Question

d3を使用してワードクラウドジェネレータを作成しようとしていますが、私はプログラマではありません。私はオンラインの例を掘り下げていましたが、これまでのところうまくいきましたが、現在は "Make Wordcloud"ボタンをクリックするだけで、別のwordcloudが追加されます。しかし、私はそれを達成するための知識が不足していると信じています。みんな助けてくれますか？コードは次のとおりです。

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

     // Get all of the words 
     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 update the svg created? 

      }; 

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

Answer 1

鍵はdraw機能にあります。行d3.select("#drawing").append("svg")に注目してください。つまり、関数が呼び出されるたびに別のSVGが追加されます。さて、これを行うための別の関数を作成することができますが、同じ関数内で関数と.exit()に関連付けられた関数を使って完全に実行することもできます。 .data()約

function draw(words) { 
    var words = d3.select("#drawing").selectAll("svg").data([0]).enter().append("svg") 
    .attr("width", 1000) 
    .attr("height", 500) 
    .append("g") 
    .attr("transform", "translate(500,250)") 
    .selectAll("text") 
    .data(words); 

    words.enter().append("text") 
    .style("font-family", "Expressway") 
    //* .style("fill", function(d, i) { return fill(i); }) *// 
    .attr("text-anchor", "middle") 

    words.style("font-size", function(d) { 
     return d.size + "px"; 
    }) 
    .attr("transform", function(d) { 
     return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; 
    }) 
    .text(function(d) { 
     return d.text; 
    }); 

    words.exit().remove(); 
} 

重要な点：

• この関数は配列を消費し、選択（この場合selectAll("text")）によって提供されるオブジェクトにその配列と一致することを試みます。
• .enter()のみ.exit()一致する配列を持たないオブジェクト（配列要素よりも多くのオブジェクト）に影響を与える、逆に新しいオブジェクト、一致するオブジェクト（オブジェクト以上の配列要素）を持たない配列でそれらの要素
• に影響
• words.<function>を呼び出すだけで、すべてのオブジェクトに影響します。

それでは、これがないと、単語を作成し、font-familyとtext-anchor設定を適用し、その後、それらに関連するfont-size、transformとテキストのすべてを更新し、textされます。最後に、出ている単語を削除します。