d3.js - D3 join 的关键功能显然没有效果

Question

我想使用 D3 从一组对象创建一个 HTML 表，例如：

const rows = [
  { name: "name1", // ...
  { name: "name2", // ...
  // ...
];

rows从 JSON 表示中不断解析，因此对象确实发生了变化。我使用以下连接，包括一个关键功能：

const tr = tbody.selectAll('tr')
  .data(rows, function (row) { 
    return row.name; });

我目前所做的观察和令我惊讶的是：在每次迭代中，enter和exit中的选择tr几乎包含rows. 例如，如果 HTML 表格有 4 行，而新数组rows只有 3 行，那么这两个选择将分别包含 3 和 4 个元素。

为什么会这样？关键函数不应该解决这个问题并确保在引用的示例中enter选择为空，并且exit集合包含一个被删除的元素吗？

我已经在检查器中检查了每个 DOMtr元素确实绑定到一行，例如{ name: "name1", // ..（即它的属性__data__有这个值），那么我做错了什么？

更新这是构建表并访问enter和exit选择的代码。只要有新的 JSON 表示到达（并被解析为rows），就会调用该函数：

const cols = ['name', // ...

function process(rows) {
  const tr = tbody.selectAll('tr').data(rows, function (row) { return row.name; });
  const tr_enter = tr.enter()
    .append('tr')
      .attr('id', function(row) { return row.name; });
  const td = tr.selectAll('td').data(function (row) {
     return cols.map(function (col) { return row[col]; });
  });
  const td_enter = tr_enter.selectAll('td').data(row_to_array)
    .enter().append('td');
  td_enter.merge(td).text(function (value) { return value; });
  td.exit().remove();
  tr.exit().remove();
}

标签： d3.js