我的D3.js代碼會將新數據添加爲新圖形，我希望將其添加到現有圖形中。我做錯了什麼？

Question

我已經經歷了幾個d3教程，但我對動畫（即轉換等）如何工作有點困惑。

我在服務器上有一個csv文件正在更新一個單獨的進程，我想我的小網頁圖形數據。

這是我的。

正如你所看到的，我的問題是每10秒鐘附加一個新圖形，而不是更新當前圖形，只畫出新點。爲了達到這個效果，我需要改變什麼？

$(document).ready(function() { 
    $.ajaxSetup({ cache: false }); 
    setInterval(function() { 
     $('#file').load('file.csv', function(){ 
      var input = $('#file').html(); 
      var data = $.csv.toObjects(input); 
      var price = []; 
      var time = []; 
      for (var row in data){ 
       price.push(data[row]["Price"]); 
      } 
      for (var row in data){ 
       time.push(data[row]["Time"]); 
      } 
     var data = price; 
     w = 400, 
     h = 200, 
     margin = 20, 
     y = d3.scale.linear().domain([0, d3.max(data)]).range([0 + margin, h - margin]), 
     x = d3.scale.linear().domain([0, data.length]).range([0 + margin, w - margin]) 
     var vis = d3.select("body") 
      .append("svg:svg") 
      .attr("width", w) 
      .attr("height", h); 
     var g = vis.append("svg:g") 
      .attr("transform", "translate(0, 200)"); 
     var line = d3.svg.line() 
      .x(function(d,i) { return x(i); }) 
      .y(function(d) { return -1 * y(d); }) 
     g.append("svg:path").attr("d", line(data)); 
.... 

    }, 10000); 
}); 

非常感謝您的意見！

Answer 1

您需要更改附加元素的代碼。第一次（當沒有圖），它可以保持不變：

var vis = d3.select("body") 
     .append("svg:svg") 
     .attr("width", w) 
     .attr("height", h); 
var g = vis.append("svg:g") 
     .attr("transform", "translate(0, 200)"); 
var line = d3.svg.line() 
     .x(function(d,i) { return x(i); }) 
     .y(function(d) { return -1 * y(d); }) 
g.append("svg:path").attr("d", line(data)); 

隨後的時間，它應該如下所示：

vis.select("path").attr("d", line(data)); 

這是假設您保存的參考產生SVG的地方，你當然也可以每次選擇它。您可能還需要代碼來更新您的比例。

請注意，更多的D3方法是將數據傳遞給一個專門的函數，該函數將它綁定到一個元素，然後相應地設置屬性。也就是說，初始代碼追加線將是

g.append("svg:path").datum(data).attr("d", line); 

並更新代碼將是

vis.select("path").datum(data).attr("d", line);