我现在正在阅读《D3 4.x Cookbook第二版数据可视化》。第三章提到了数据更新模式。有时作者使用merge()来实现数据更新,但有时作者使用selectAll()来实现。我发现在某些情况下它们是不可互换的。我现在很困惑,我想知道,我如何才能确定我应该用哪种方式来更新数据。
在3.2.2中,作者使用merge()实现了数据更新
function render(data) { // <- B
var bars = d3.select("body").selectAll("div.h-bar") // <- C
.data(data); // Update <- D
// Enter
bars.enter() // <- E
.append("div") // <- F
.attr("class", "h-bar") // <- G
.merge(bars) // Enter + Update <- H
.style("width", function (d) {
return (d * 3) + "px"; // <- I
})
.text(function (d) {
return d; // <- J
});
// Exit
bars.exit() // <- K
.remove();
}
在3.6.2中,作者使用selectAll()实现了数据更新
function render(data, category) {
var bars = d3.select("body").selectAll("div.h-bar") // <-B
.data(data);
// Enter
bars.enter()
.append("div") // <-C
.attr("class", "h-bar")
//.merge(bars)
.style("width", function (d) {
return (d.expense * 5) + "px";}
)
.append("span") // <-D
.text(function (d) {
return d.category;
});
// Update
d3.selectAll("div.h-bar").attr("class", "h-bar");
// Filter
bars.filter(function (d, i) { // <-E
return d.category == category;
})
.classed("selected", true);
}
我真的需要你的帮助!谢谢!
1条答案
按热度按时间mbjcgjjk1#
这不是更新选择(应该是
bars
),这只是作者设计的从栏中删除selected
类的奇怪方法。你看,当你点击这些按钮时,类为
selected
的div变成了红色,而其他div保持蓝色。...删除
selected
类,因为attr("class", "foo")
将覆盖任何现有类(see my answer here)。让我感到奇怪的是,那个作者尼克·朱很好,我不明白他为什么要这样做来删除一个类。他可以简单地这样做:
下面是它工作的证明(我从他的GitHub repo中复制了他的代码):
第一个