清除 D3.js 画布答案

【问题标题】：Clearing D3.js canvas清除 D3.js 画布
【发布时间】：2018-11-26 19:26:29
【问题描述】：

我正在使用 D3 生成一个家谱图，（基于此处提供的代码：http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html）并且图数据来自服务器，用户可以选择他想要查看的家庭，然后单击提交按钮返回数据，然后 D3 绘制图形。但是，如果用户选择了另一个系列（或同一个系列）并在不刷新页面的情况下按下提交，则新图将绘制在旧图的下方。如何清除 D3.js 画布以便只看到新图形？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

将.remove() 应用于现有选择。

// Set new data on your chart:
var items = d3.select('svg').selectAll('.item').data(newData);

// Remove old elements:
items.exit().remove();

【讨论】：

这是否假设新数据的元素少于旧数据？
@AkhilNair 不一定少。可能更多，但索引不同（例如不同的 id）。

【解决方案2】：

在绘制图表之前使用以下代码。希望这会有所帮助。

d3.select('svg').selectAll('*').remove();

【讨论】：

【解决方案3】：

在使用容器的情况下，使用 JQuery 清空方法清除容器解决了我的问题

$("#svgCanvasDiv").empty();

【讨论】：

【解决方案4】：

上述方法在某些情况下有效，但我发现清除画布的最简单方法是将其绘制在容器中，然后在绘制任何内容之前，使用以下命令清除容器： d3.select("#container").html(null);

【讨论】：

【解决方案5】：

您可以使用清除画布

  d3.select('svg').remove();

新的图表将在这个被清除的空间中绘制。

【讨论】：