Ajax D3.js Таблица на основе CSV

Question

как обстоят дела?

Я пытаюсь на пару дней пытаться автоматически загружать таблицу на странице без необходимости обновления всей страницы.

Я использую D3.js для создания таблицы из CSV, хранящейся в моем Dropbox.

Я хочу обновить таблицу каждые 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

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