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

我遵循了这个示例：，并使它适用于我的所有数据-但我创建了一个下拉菜单，它可以选择特定的周，而不只是查看所有周的总和

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

我可以看到函数给出了正确星期的日期，因此我无法找出问题所在-可能与

exit（）

和

remove（）

函数有关

我的代码可以在这里找到：

---

不要删除元素，只在D3代码中重新附加元素，如中所述：这不是惯用的解决方案，这是一种缓慢而无效的解决方法，它会使代码中的事情更加困难。这就是我所说的延迟更新

相反，请使用正确的输入/更新/退出选项。这里是对代码的重构，我有意避免

merge（）

，这在一开始是很难理解的，因此会有一些代码重复

在这里，这是更新选择：

var cards = svg_sum.selectAll(".hour")
    .data(flatList);

cards.exit().remove();

现在是退出选择：

var cards = svg_sum.selectAll(".hour")
    .data(flatList);

cards.exit().remove();

然后，您有了enter选择，带有转换：

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（）

避免重复。关于图例，事情更加复杂，因为您在那里有组（查看我的fork以查看选择）

---

这是您更新的bl.ocks:

您已经犯下了所有关于进入-退出更新的常规错误。重新阅读有关此模式的文档和文章。我不知道这是否是最聪明的方法，但我通过使用

if（cards）{cards.remove（）；}

在绘制新的矩形之前：）是的，在生成内容之前删除所有内容。仅当您需要位置动画时，它将不起作用。非常感谢您-但使用此解决方案，在选择非完整周的周时（第31周和第37周分别只有周一和周日的数据），以及在按住一段时间后，一些矩形消失时，似乎会出现问题：）这是另一个问题，这与数据有关。请在StackOverflow每一个问题只保留一个问题。你可以发布一个新问题，更好地解释这个问题并分享你正在使用的数据。