d3.jschartsnvd3.js

NVD3, Clear svg before loading new chart

I have several different NVD3 charts that I call upon in the same svg. I use buttons to call functions, each containing a new chart that uses its own data.

Is there a way to clear my single svg without deleting it? I wish to press a button to call my chart, but clear the svg before the new chart is loaded.

It's not an issue when using the kind of chart... calling two multibarhorizontal charts, for example, just updates the shapes, which is fine. The problem is loading two different charts, like a line and a bar.

EDIT - The answers must be something like d3.select("svg").remove() but that just deletes the svg. I only want to clear it.

Solution

  • You can select all the elements below the SVG with the "svg > *" selector, i.e. to remove all of those, do

    d3.selectAll("svg > *").remove();