未能在D3中轉換新數據

Question

我可以一次性加載和顯示數據，但任何嘗試更新似乎都失敗。

我試圖建立一個顯示活動的地圖。在我的數據CSV中，我有緯度和經度以及活動時間（0-23）。我正在使用this highly useful tutorial更新D3與新數據。這個想法是我按小時循環數據。

我已經或多或少的失去了更新功能。儘管初始調用完美無缺，但任何重複調用都只能重新着色已存在的數據，而不是將其刪除並添加新數據。這使我相信我不會改變傳入的數據。

我的更新電話有什麼明顯的錯誤嗎？在命令行

function update(data, x) { 
    // DATA JOIN 
    // Join new data to any existing data 
    var circles = g.selectAll("circle") 
     .data(data); //, function(d) { return d; }); 

    // UPDATE 
    // Update old elements as needed. 
    circles 
     .style("fill", "green") 
      .transition() 
      .duration(750); 

    // ENTER 
    // Create new elements 
    circles.enter().append("circle") 
     .filter(function(d) { return d.hr == x; }) 
     .attr("cx", function(d) { 
      return projection([d.lon, d.lat])[0]; 
     }) 
     .attr("cy", function(d) { 
      return projection([d.lon, d.lat])[1]; 
     }) 
     .attr("r", 0) 
     .style("opacity", 0.2) 
     .style("fill", "blue") 
     .transition() 
     .duration(750) 
     .ease("linear") 
     .attr("r", function(d) { 
      return d.radius/2; 
     }); 


    // EXIT 
    // Remove old elements 
    circles.exit() 
     .style("fill", "red") 
     .transition() 
     .duration(1500) 
     .ease("linear") 
     .attr("r", 0) 
     .remove(); 
} 

運行：

update(csv_data, 1) 
update(csv_data, 5) 

Answer 1

好像你正在試圖通過行

filter(function(d) { return d.hr == x; }) 

更改數據，但這只是filtering the selection。

你想要做什麼是之前過濾數據它傳遞給你的選擇，你與線

.data(data); 

我建議您在更新功能的開頭使用Array.filter做：

function update(data, x) { 
    // DATA JOIN 
    // Join new data to any existing data 

    // filter the data as per x 
    data = data.filter(function (d) { return d.hr == x; }); 

    var circles = g.selectAll("circle") 
     .data(data); 

    // rest of function 
} 

務必刪除追加後過濾的行。