d3.js v4 -嵌套选择

d3.js v4 - Nested Selections

本文关键字：嵌套 选择 v4 js d3      更新时间：2023-09-26

在d3.js 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; });
https://jsfiddle.net/nwozjscs/

但不是在v4: https://jsfiddle.net/nwozjscs/1/

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

我想我明白了。如果在加入下一层数据之前将合并输入和更新选择到单个选择中，则似乎可以正常工作。这样一来，任何新数据以及任何现有数据都将被正确地考虑到下一层。

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

如果有更好的方法，请评论!

https://jsfiddle.net/nwozjscs/2/

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);
相关文章：