Clearing D3.js canvas

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();