Как обновить таблицу с помощью D3. js

Question

У меня есть документ html со следующим разделом:

 <select id="avgSalesTable" onchange="createTable();">
    <option>---</option>
    <option value="2018">2018</option>
    <option value="2016">2016</option>
</select>

И у меня есть файл JavaScript со следующим разделом:

function createTable(year) {

   var filtered_year = document.getElementById("avgSalesTable").value;

   console.log(filtered_year)

   var filtered_data = realEstateData.filter(x => x.year === filtered_year)

   console.log(filtered_data)

   for (var i = 0; i < filtered_data.length; i++) {
        var row = d3.select('tbody').append('tr');
        row.append('td').html(filtered_data[i].Borough);
        row.append('td').html(filtered_data[i].averagePrice1familyHome);

   }
  }
createTable(2016)

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

Вот файл realEstateData:

var realEstateData = [

{
    year: "2018",
    Borough: "Bronx",
    averagePrice1familyHome: 499060
},

{
    year: "2016",
    Borough: "Bronx",
    averagePrice1familyHome: 478379
},

//--------------
{
    year: "2018",
    Borough: "Manhattan",
    averagePrice1familyHome: 8235346
},

{
    year: "2016",
    Borough: "Manhattan",
    averagePrice1familyHome: 8176576
},


//--------------
{
    year: "2018",
    Borough: "Brooklyn",
    averagePrice1familyHome: 980737
},


{
    year: "2016",
    Borough: "Brooklyn",
    averagePrice1familyHome: 876864
},

//--------------

{
    year: "2018",
    Borough: "Queens",
    averagePrice1familyHome: 645921
},

{
    year: "2016",
    Borough: "Queens",
    averagePrice1familyHome: 613139
},



//--------------

{
    year: "2018",
    Borough: "Staten Island",
    averagePrice1familyHome: 520214
},

{
    year: "2016",
    Borough: "Staten Island",
    averagePrice1familyHome: 483340
},
//--------------
];

Заранее спасибо

Answer 1

d3 не используется должным образом в существующем коде: функция d3 data join не используется, она обеспечит преимущество облегчения управления изменениями в данных.

Быстрое решение - очистить таблицу перед добавлением строк. Это можно сделать, добавив следующее прямо перед for l oop:

d3.select('tbody').html('')

В противном случае код должен быть реорганизован, основные шаги:

• bind набор данных для выбора d3, используя selection.data()
• , используйте selection.join() для обновления таблицы как требуется: добавьте новые соответствующие строки, удалите устаревшие строки.
• в случае объем данных разумный, имеет смысл добавлять все данные в таблицу один раз при загрузке страницы и переключать видимость каждой строки только для фильтрации.
• переименовывать createTable в updateTable (приятно иметь)