基于CSV的Ajax D3.js表

Question

how are things?

I've struggling for a couple of days now trying to make my table to upload automatically on the page without the need of refreshing the entire page.

I'm using D3.js to create a table from a CSV stored on my dropbox.

I want to update the table every 5 seconds, and I was able to put the code around setInterval() to make it update, but this is just creating another table below it. I know that's due the .apend(), but since I'm beginner on this, my question is: How can I make my table to update every 5 seconds without refreshing the page and just updating the data, without blinking the table on user screen?

Here's my code

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

</div>

Answer 1

The append("table") does create a new table every interval. You have to create the table outside setInterval().

Maybe you can declare an empty table in your html:

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

Your javascript might look like below to update the table when the data changes

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