Javascript 如何使用D3.js更新表

我有一个包含以下部分的html文档：

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

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)

---

提前感谢

d3在现有代码中未按应有的方式使用：未使用d3的功能，它将提供方便管理数据更改的好处

快速修复方法是在追加行之前清空表。这可以通过在
for
循环之前添加以下内容来完成：

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

否则，应重构代码，主要步骤如下：


使用
selection.data（）
用于根据需要更新表：添加新的相关行，删除过时的行
如果数据量合理，则在页面加载时将表中的所有数据添加一次，并且仅将每行的可见性切换到筛选器是有意义的
将
createTable
重命名为
updateTable
（很好）

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