基於CSV的Ajax D3.js表

Question

情況如何？

我掙扎了兩天來，試圖讓我的表在頁面上自動上傳，而無需刷新整個頁面的。

我使用D3.js從存儲在Dropbox的我一個CSV創建表。

我想更新表每隔5秒鐘，我能夠把周圍的setInterval（）的代碼，使之更新，但是這僅僅是建立在它下面另一個表。我知道這是由於.apend（），但因爲我是初學者，所以我的問題是：如何讓我的表每5秒更新一次而不刷新頁面，只更新數據，而不閃爍用戶表屏幕？

這裏是我的代碼

<script type="text/javascript"charset="utf-8"> 
 
setInterval(function() { 
 

 
d3.text("https://dl.dropboxusercontent.com/s/2fe6gwt1kl5j7cb/live_laptime.csv?dl=0", function(data) { 
 
    var parsedCSV = d3.csv.parseRows(data); 
 

 
    var container = d3.select("#container2") 
 
      .append("table") 
 

 
      .selectAll("tr") 
 
       .data(parsedCSV).enter() 
 
       .append("tr") 
 

 
      .selectAll("td") 
 
       .data(function(d) { return d; }).enter() 
 
       .append("td") 
 
       .text(function(d) { return d; }); 
 
}); 
 
},5000); 
 
</script>

Answer 1

的append("table")並創建一個新表每間隔。您必須在setInterval()之外創建表格。

也許你可以在你的HTML聲明一個空表：

<table id="table1"></table> 

您的JavaScript可能看起來像下面數據改變時

setInterval(function() { 

    d3.text("https://dl.dropboxusercontent.com/s/2fe6gwt1kl5j7cb/live_laptime.csv?dl=0", function(data) { 
     var parsedCSV = d3.csv.parseRows(data); 

     var rows = d3.select("#table").selectAll("tr") 
      .data(parsedCSV); 

     rows.enter().append("tr"); 

     var cells = rows.selectAll("td") 
      .data(function(d) { return d; }); 

     cells.enter().append("td"); 

     cells.text(function(d) { return d; }); 
    }); 
},5000); 

更新表