【问题标题】：Unable to refresh svg chart on Data Change无法刷新数据更改的 svg 图表
【发布时间】：2018-04-16 07:50:35
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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 + ")"
    );

进入退出更新

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

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

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

【讨论】：

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