清空 D3.js 画布

Question

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

- user235236

Answer 1

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

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

- Pranab Mitra

Answer 2

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

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

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

- Oleg

---

这是否假定新数据的元素少于旧数据？ - Akhil Nair

@AkhilNair 不一定更少，可能更多，但索引方式不同（例如，不同的ID）。 - Oleg

Answer 3

如果使用容器，使用JQuery empty方法清空容器可以解决我的问题。

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

- Yasser Sobhdel

Answer 4

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

- user235236

Answer 5

您可以使用以下代码清除画布：

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

新图将在这个已清空的空间中绘制。

- Szeth