D3 v4嵌套数据更新：text(null)优化及最优方案咨询

首先得说，你代码里的text(null)确实是个问题——不仅怪异，还会破坏你的嵌套更新逻辑，咱们一步步拆解：

为什么text(null)不对？ #

你在绑定<tr>数据后直接调用了.text(null)，这会清空<tr>标签内的所有内容（包括已经存在的<td>元素）。这就意味着每次更新时，你之前创建的单元格都会被删掉，然后不得不重新创建所有<td>，完全违背了D3的enter/update/exit高效更新理念，而且逻辑上也没必要，因为<tr>本身就不应该直接包含文本内容，它的子元素是<td>。

正确的嵌套数据更新方式 #

针对你的嵌套数据结构（外层是行数据，内层是单元格数据），应该分层处理enter/update/exit流程，避免破坏已有的DOM元素。修正后的代码如下：

var data = [ 
  {key: 1, values:[1, 2, 3]}, 
  {key: 2, values:[3, 4, 5]}
];

function update(data) {
  var table = d3.select('#gogo');

  // 1. 处理外层<tr>的绑定与更新
  var tr = table.selectAll('tr')
    .data(data);

  // 移除不再需要的旧行
  tr.exit().remove();

  // 添加新的行元素
  var rowEnter = tr.enter().append('tr');

  // 合并已存在的行和新添加的行，统一处理内层单元格
  var trMerge = tr.merge(rowEnter);

  // 2. 处理内层<td>的绑定与更新
  var td = trMerge.selectAll('td')
    .data(d => d.values); // 绑定每行的values数组作为单元格数据

  // 移除不再需要的旧单元格
  td.exit().remove();

  // 添加新的单元格，并合并更新已有单元格的文本
  td.enter().append('td')
    .merge(td)
    .text(d => d);
}

关键要点说明 #

• 分层处理：先完成外层行的enter/update/exit，再基于合并后的行处理内层单元格，这样能保留已有的DOM元素，只更新变化的部分。
• 不要随意清空父元素内容：父元素的内容应该通过子元素的enter/update/exit来管理，而不是直接用text(null)或html(null)粗暴清空。
• 处理exit阶段：你的原代码没处理旧元素的移除，这会导致数据更新后旧的行/单元格残留，必须调用.exit().remove()清理不再需要的元素。

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