我已经按照这个例子:http://bl.ocks.org/tjdecke/5558084,让它适用于我的所有数据 - 但是我创建了一个下拉菜单,可以选择某些周,而不是仅查看所有周的总和。
问题在于日历的交互式更新 - 颜色不会改变,并且当console.logging变量“cards”时它是空的。此外,图例确实更新,但它只是将新数字写在旧数字之上。
我可以看到适当周的日期都给了函数,所以我无法弄清楚问题出在哪里 - 也许它与exit()
和remove()
函数有关?
我的代码可以在这里找到:http://blockbuilder.org/Skov94/e44fcebd282fe5eb4c708e8ba0af95d6
不要删除元素只是为了将它们重新附加到D3代码中,如comments所示:这不是惯用的解决方案,它是一种缓慢而无效的解决方法,它可以使代码中的方法更加艰难。这就是我所谓的懒惰更新。
而不是使用正确的输入/更新/退出选择。这是你的代码的重构,其中我故意避免使用merge()
,这一开始很难理解,因此有些代码重复。
在这里,这是更新选择:
var cards = svg_sum.selectAll(".hour")
.data(flatList);
现在出口选择:
cards.exit().remove();
然后,您有输入选择,转换:
cards.enter().append("rect")
.attr("x", function(d, i) {
return (d.hour) * gridSize;
})
.attr("y", function(d) {
return (d.day - 1) * gridSize;
})
.attr("rx", 4)
.attr("ry", 4)
.attr("class", "hour bordered")
.attr("width", gridSize)
.attr("height", gridSize)
.style("fill", colors[0])
.transition().duration(1000)
.style("fill", function(d) {
return colorScale_sum(d.value);
});
并且,再次,更新选择的相同转换。
cards.transition().duration(1000)
.style("fill", function(d) {
return colorScale_sum(d.value);
});
正如我所说,你可以避免使用merge()
重复。关于传说,情况会更复杂,因为你在那里有组(看看我的前叉看看选项)。
这是你更新的bl.ocks:http://bl.ocks.org/GerardoFurtado/d938a52519b4701704137e8c8e6c826d/bacf8134a81c37e977094fe80afd6c12866b7c58