交互式更新在热图中不起作用

问题描述 投票:2回答:1

我已经按照这个例子:http://bl.ocks.org/tjdecke/5558084,让它适用于我的所有数据 - 但是我创建了一个下拉菜单,可以选择某些周,而不是仅查看所有周的总和。

问题在于日历的交互式更新 - 颜色不会改变,并且当console.logging变量“cards”时它是空的。此外,图例确实更新,但它只是将新数字写在旧数字之上。

我可以看到适当周的日期都给了函数,所以我无法弄清楚问题出在哪里 - 也许它与exit()remove()函数有关?

我的代码可以在这里找到:http://blockbuilder.org/Skov94/e44fcebd282fe5eb4c708e8ba0af95d6

javascript d3.js
1个回答
2
投票

不要删除元素只是为了将它们重新附加到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

© www.soinside.com 2019 - 2024. All rights reserved.