gpt4 book ai didi

javascript - d3.js v4 - 嵌套选择

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:13:17 27 4
gpt4 key购买 nike

在 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/

我的感觉是,这与 merge(...) 更改有关,但我无法在中找到编写嵌套选择的正确方法的示例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);

关于javascript - d3.js v4 - 嵌套选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39861603/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com