清除D3.js画布

Question

I am using D3 to produce a family tree graph, (based on the code presented here: http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html ) and the graph data comes from a server and the user can select which family he wants to view, then clicks the submit button which returns the data and then D3 draws the graph. However, if the user chooses another family (or the same one for that matter) and presses submit without refreshing the page, the new graph is drawn below the old one. How can I clear the D3.js canvas so that the new graph is the only thing seen?

Answer 1

Apply .remove() to the exiting selection.

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

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

Answer 2

Use the following code before drawing the graph. Hope this will help.

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

Answer 3

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

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

Answer 4

上面的方法在某些情况下有效，但是我发现清除画布的最简单方法是将其绘制在容器中，然后再绘制任何东西，使用以下方法清除容器：d3.select（“＃container”）。html（null ）;

Answer 5

You can clear the canvas using

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

The new graph will be drawn in this cleared out space.