基于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); 

更新表