Question

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

Answer 1

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

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

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

Answer 2

如果使用容器，使用JQuery空方法清除容器解决了我的问题

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

Answer 3

以上情况在某些情况下有效，但我发现清除画布的最简单方法是在容器中绘制它并在绘制任何内容之前清除容器： d3.select（＆＃34;＃容器＆＃34）的HTML（零）;

Answer 4

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

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

Answer 5

您可以使用清除画布

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

新图形将在此清除的空间中绘制。

清除D3.js画布

5 个答案: