Javascript d3.js v4-嵌套选择

Javascript d3.js v4-嵌套选择,javascript,d3.js,Javascript,D3.js,在d3.js v4中,嵌套选择似乎不像过去那样有效 这项工作(在v3中): 但不是在v4中: 我的感觉是,这与合并(…)更改有关,但我还没有找到在v4中编写嵌套选择的正确方法的示例。我想我已经找到了答案。如果在加入下一层数据之前将“输入”和“更新”选项合并到单个选项中,则该选项似乎可以正常工作。这样,在顶层的任何新数据以及任何现有数据都将在下一层中正确考虑 如果你仔细想想,这是完全有道理的。我想我只是太习惯了v3的魔力而看不到显而易见的东西 如果有更好的方法,请发表评论 就是这样。看见 va

在d3.js v4中,嵌套选择似乎不像过去那样有效

这项工作(在v3中):

但不是在v4中:


我的感觉是,这与合并(…)更改有关,但我还没有找到在v4中编写嵌套选择的正确方法的示例。

我想我已经找到了答案。如果在加入下一层数据之前将“输入”和“更新”选项合并到单个选项中,则该选项似乎可以正常工作。这样,在顶层的任何新数据以及任何现有数据都将在下一层中正确考虑

如果你仔细想想,这是完全有道理的。我想我只是太习惯了v3的魔力而看不到显而易见的东西

如果有更好的方法,请发表评论

就是这样。看见
var data = [["1-a", "1-b"], ["2-a", "2-b"]];

var tbody = d3.select("tbody");

var row = tbody.selectAll("tr").data(data);
row.exit().remove();
row.enter().append("tr");

var cell = row.selectAll("td").data(function(d){ return d;});
cell.exit().remove();
cell.enter().append("td");
cell.text(function(d){ return d; });
function render(data){
  var tbody = d3.select("tbody");

  var row = tbody.selectAll("tr").data(data);
  var rowenter = row.enter().append("tr");

  var cell = row.merge(rowenter)
    .selectAll("td").data(function(d){ return d;});

  cell.enter().append("td").text(function(d){ return d; });
}

render([["1-a", "1-b"], ["2-a", "2-b"]]);

setTimeout(function(){
    render([["1-a", "1-b", "1-c"], ["2-a", "2-b", "2-c"], ["3-a", "3-b", "3-c"]]);
}, 2000);