无法刷新数据更改上的 svg 图表

Question

我有一个在d3js上设计的热图。我添加了两个过滤器来对数据进行排序。当我更改筛选器时，我在控制台中看到更新的数据，并且图表刷新。但每次刷新后，早期的可视化图表仍会保留。

我已经尝试了 d3 的.remove()和.exit。这些似乎不起作用。

这是我在代码沙箱中的代码的链接：https://codesandbox.io/s/5x6qkjw6kp

Answer 1

快速回答

代码设置的方式是，每次过滤器更改时都会调用整个热图创建函数，因此您再次读取数据、轴和所有内容。基于此，您可以轻松清除图表上的所有元素并从头开始重新创建它们，而不是使用真正的输入、退出、更新模式，方法是在定义图表之前放置这条线。

d3.select(".chart").selectAll("*").remove();

所以你的代码现在看起来像

//Setting chart width and adjusting for margins
d3.select(".chart").selectAll("*").remove();
const chart = d3
.select(".chart")
.attr("width", width + margins.right + margins.left)
.attr("height", height + margins.top + margins.bottom)
.append("g")
.attr(
"transform",
"translate(" + margins.left + "," + margins.top + ")"
);

进入退出更新

本节已经过大量编辑，但查看代码，必须进行大量更改才能使其使用输入/退出/更新类型流程。考虑将主要创建步骤放在函数之外的图表创建开始时，因为这些步骤只需要在加载时运行一次(标题、轴等)。单击新元素不会重新创建整个图表，而只会更改用于创建 rect 对象的数据集。

这通过在重新创建图表之前删除作为主图表组子级的所有元素来工作。

希望这是有道理的，如果有什么不清楚的地方，请告诉我，我会整理的！