NVD3, Clear svg before loading new chart

JasTonAChair picture JasTonAChair · Mar 17, 2014 · Viewed 60.2k times · Source

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.

Thanks in advance

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

Answer

Lars Kotthoff picture Lars Kotthoff · Mar 17, 2014

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