Question

事情怎么样？

我已经挣扎了几天，现在试图让我的桌子自动上传到页面上而不需要刷新整个页面。

我使用D3.js从存储在我的保管箱上的CSV创建表格。

我想每5秒更新一次表，并且我能够将代码放在setInterval（）周围以使其更新，但这只是在它下面创建另一个表。我知道那是因为.apend（），但是由于我是初学者，我的问题是：如何让我的表每5秒更新一次而不刷新页面而只是更新数据，没有在用户界面上闪烁表格？

这是我的代码

＆＃13;

<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>

＆＃13;

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

Ajax D3.js表基于CSV

1 个答案: