基于 CSV 的 Ajax D3.js 表答案

【问题标题】：Ajax D3.js Table based on CSV基于 CSV 的 Ajax D3.js 表
【发布时间】：2015-11-07 09:31:19
【问题描述】：

现在怎么样了？

我已经苦苦挣扎了几天，试图让我的表格自动上传到页面上，而无需刷新整个页面。

我正在使用 D3.js 从存储在我的保管箱中的 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>

【问题讨论】：

标签： jquery ajax csv d3.js

【解决方案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);

【讨论】：