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

Question

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

我已经在 d3 中尝试了 .remove() 和 .exit。这些似乎没有用。

这是我在 codesandbox 中的代码的链接: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 类型的进程。考虑将主要创建步骤放在函数之外的图表创建开始处，因为这些只需要在加载时运行一次(标题、轴等)。单击新元素不会重新创建整个图表，而只会更改用于创建矩形对象的数据集。

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

希望这是有道理的，如果有任何不清楚的地方，请告诉我，我会整理一下!