使用D3.js更新詞雲

Question

我有兩個字符，一個顯示每年的發佈數據，另一個顯示詞雲。詞雲顯示標題。

這裏是DEMO。

當我鼠標懸停年（2011年至2015），我想更新這些年的詞雲。

當我將鼠標放置到今年的第一次，它更新雲詞。但是，當我第二次或第三次鼠標懸停時，它不會更新。

任何想法，爲什麼會發生？

我將不勝感激任何幫助。

謝謝！

Answer 1

幾件事情：

1. 在你prepareCloudJS功能，你回來的find_duplicates其結果似乎總是一個空數組。它看起來像你沒有正確地檢查重複項，正如我在數據中可以看到應該有重複項，但是由於大寫和/或標點符號而沒有被正確檢測到。

   我將離開你自己解決這一個，因爲這既是一個數據和編碼問題。但對於一些提示，您將希望刪除所有標點符號並將所有單詞轉換爲相同大小寫以查找重複項。

2. 當您在drawUpdate函數中重繪字雲時，您沒有正確遵循d3enter, update, exit模式。邁克的thinking with joins可能在這裏幫助，也檢查該頁面底部的「一般更新模式」鏈接。

   你可能會喜歡做這樣的事情：

   function drawUpdate(words){ 
       d3.layout.cloud().size([960, 600]) 
         .words(words) 
         .padding(5) 
         .rotate(function() { return ~~(Math.random() * 2) * 90; }) 
         .font("Impact") 
         .fontSize(function(d) { return d.size; }) 
         .start(); 
   
       // new variable to hold the selection 
       var words = area1.select("#svg2") 
         .selectAll("g") 
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
         .attr("transform", "translate(150,150)"); 
         .selectAll("text") 
         .data(words); 
   
       // append new text elements 
       words.enter().append("text"); 
   
       // update all words in the word cloud (when you append 
       // nodes from the "enter" selection, d3 will add the new 
       // nodes to the "update" selection, thus all of them will 
       // be updated here. 
       words.style("font-size", function(d) { return d.size + "px"; }) 
        .style("font-family", "Impact") 
        .style("fill", function(d, i) { return fill(i); }) 
        .attr("transform", function(d) { 
         return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; 
        }) 
        .text(function(d) { return d.text; }); 
   
       words.exit().remove(); // new line to remove all unused words 
   }