无法理解D3 v4嵌套数据场景下的新通用更新模式

嘿，我懂你回归D3 v4时的困惑——毕竟v4把数据绑定的更新模式拆得更明确了，和旧版本的写法差别不小。你现在的代码只处理了初始数据的enter阶段，当后续要添加新子节点时，完全没覆盖到更新（update）和退出（exit）的逻辑，所以新节点根本加不进去。

下面是修正后的完整update函数，我会一步步给你解释：

function update(data) {
  // 第一步：处理父节点（.row）的完整更新周期
  var rows = d3.selectAll("div.row")
    .data(data);

  // 移除不再需要的旧父节点
  rows.exit().remove();

  // 为新增的父数据创建节点
  var rowsEnter = rows.enter()
    .append("div")
    .classed("row", true);

  // 合并enter和update集合，这样后续操作能同时作用于新旧父节点
  rows = rowsEnter.merge(rows);

  // 第二步：处理每个父节点下的子节点（.cell）
  var cells = rows.selectAll("div.cell")
    .data(function(d) { return d; }); // 绑定当前父节点对应的子数组

  // 移除多余的旧子节点
  cells.exit().remove();

  // 创建新子节点，同时合并enter和update集合——
  // 这样不管是新增节点还是已有节点，都能统一更新文本内容
  cells.enter()
    .append("div")
    .classed("cell", true)
    .merge(cells)
    .text(function(d) { return d; });
}

关键逻辑说明： #

• 父节点处理：必须拆分exit/enter/merge三个步骤，不然当父数据变化时，旧节点不会被清理，新节点的子元素也没法正确绑定。
• 子节点处理：同样要覆盖完整的更新周期，尤其是merge的使用——它能把新创建的节点和已有节点合并成一个集合，这样后续的text()操作既能给新节点赋值，也能更新旧节点的内容（如果子数据有变化的话）。

测试示例： #

你可以用这段代码验证效果：

// 初始数据
var arr = [
  [1, 2, 3],
  [4, 5]
];
update(arr);

// 2秒后更新数据，添加新子节点
setTimeout(() => {
  arr = [
    [1, 2, 3, 6],
    [4, 5, 7, 8]
  ];
  update(arr);
}, 2000);

运行后你会看到，原本的row里会自动新增对应的cell节点，完全符合你的需求。

内容的提问来源于stack exchange，提问作者methodofaction