无法在数据更改

Question

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

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

以下是我在codeandbox中的代码的链接：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 + ")"
    );

输入退出更新

本节已经过大量编辑，但仔细查看代码，必须进行大量修改才能使其适应使用Enter / Exit / Update类型进程。考虑将主要创建步骤放在函数外部的图表创建开始，因为这些只需要在加载时运行一次（标题，轴，类似的东西）。单击新元素将不会重新创建整个图表，而只是更改用于创建rect对象的数据集。

这可以通过在重新创建图表之前删除主图表组的子元素。

希望有道理，让我知道是否有任何不清楚的地方我会整理一下！