Javascript 无法在数据更改时刷新svg图表

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

我已尝试从d3中删除（）和退出。这些似乎不起作用

下面是我在codesandbox中的代码链接：

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

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对象的数据集

这是通过在重新创建图表之前删除主图表组的所有子元素来实现的

---

希望这是有意义的，让我知道如果有什么不清楚，我会收拾它

非常感谢你的代码。但是，即使有了这些更改，您也认为图表在呈现时是重叠的。嗨，Rohit，我已经更改了答案，为您提供了一个新的单行快速修复，并进一步解释了为什么输入/退出/更新在现有代码上不需要一点返工就无法轻松工作。这个现在可以很好地工作了。非常感谢。另外，你知道如何为图表设置默认背景色吗？现在，在绘制数据之后，块之间存在空白。我知道我可以通过将矩阵中的数据作为输入法来实现。有没有其他方法可以在图表上添加背景色？一种简单的方法是在const chart部分中定义的主“g”内绘制一个Rect元素。然后你将这个矩形设置为图表的高度和宽度，设置背景色，你就完成了！这对创建

rect

起到了作用，但在这篇文章中，我的主图表消失了。