NVD3, Clear svg before loading new chart

d3.js Problem Overview

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.

d3.js Solutions

Solution 1 - d3.js

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

Solution 2 - d3.js

This works for me:

var svg = d3.select("svg");
svg.selectAll("*").remove();

Solution 3 - d3.js

If you are developing a dashboard having multiple widget showing different d3 charts then use the following

d3.selectAll("#d3-donutChart > *").remove();

this will only clear the specific chart, not all the svg's in the webpage.

Add this line just after subscribing to data in angular 2.

Solution 4 - d3.js

This is the one that worked for me.

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

Solution 5 - d3.js

after create button put this code

$("svg").remove()

Solution 6 - d3.js

This is all you need.

svg.text('')

Solution 7 - d3.js

For Re-Drawing the D3 Graphs by clearing the existing sketch and updating.
<body>
...
<input name="reDraw" type="button" value="Re-Draw" onclick="reDraw('data2.csv')" />
...

<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

//d3.select('#chart svg')

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
	.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

   var updateData = function(getData){
	
	d3.selectAll('svg > g > *').remove();
	
	d3.csv(getData, function(error, data) {
	  if (error) throw error;
	  
	  var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });
	
	  data.forEach(function(d) {
	    d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
	  });
	
	  x0.domain(data.map(function(d) { return d.State; }));
	  x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
	  y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);
	
	  svg.append("g")
	      .attr("class", "x axis")
	      .attr("transform", "translate(0," + height + ")")
	      .call(xAxis);
	
	  svg.append("g")
	      .attr("class", "y axis")
	      .call(yAxis)
	    .append("text")
	      .attr("transform", "rotate(-90)")
	      .attr("y", 6)
	      .attr("dy", ".71em")
	      .style("text-anchor", "end")
	      .text("Population");
	
	  var state = svg.selectAll(".state")
	      .data(data)
	    .enter().append("g")
	      .attr("class", "state")
	      .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });
	
	  state.selectAll("rect")
	      .data(function(d) { return d.ages; })
	    .enter().append("rect")
	      .attr("width", x1.rangeBand())
	      .attr("x", function(d) { return x1(d.name); })
	      .attr("y", function(d) { return y(d.value); })
	      .attr("height", function(d) { return height - y(d.value); })
	      .style("fill", function(d) { return color(d.name); });
	
	  var legend = svg.selectAll(".legend")
	      .data(ageNames.slice().reverse())
	    .enter().append("g")
	      .attr("class", "legend")
	      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
	
	  legend.append("rect")
	      .attr("x", width - 18)
	      .attr("width", 18)
	      .attr("height", 18)
	      .style("fill", color);
	
	  legend.append("text")
	      .attr("x", width - 24)
	      .attr("y", 9)
	      .attr("dy", ".35em")
	      .style("text-anchor", "end")
	      .text(function(d) { return d; });
	
	});

}

updateData('data1.csv');

</script>
</body>

Content Type	Original Author	Original Content on Stackoverflow
Question	JasTonAChair	View Question on Stackoverflow
Solution 1 - d3.js	Lars Kotthoff	View Answer on Stackoverflow
Solution 2 - d3.js	kml	View Answer on Stackoverflow
Solution 3 - d3.js	deeksha gupta	View Answer on Stackoverflow
Solution 4 - d3.js	Raphael	View Answer on Stackoverflow
Solution 5 - d3.js	naresh	View Answer on Stackoverflow
Solution 6 - d3.js	liningx	View Answer on Stackoverflow
Solution 7 - d3.js	Karthi	View Answer on Stackoverflow