NVD3, Clear svg before loading new chart

d3.jsChartsnvd3.js

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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJasTonAChairView Question on Stackoverflow
Solution 1 - d3.jsLars KotthoffView Answer on Stackoverflow
Solution 2 - d3.jskmlView Answer on Stackoverflow
Solution 3 - d3.jsdeeksha guptaView Answer on Stackoverflow
Solution 4 - d3.jsRaphaelView Answer on Stackoverflow
Solution 5 - d3.jsnareshView Answer on Stackoverflow
Solution 6 - d3.jsliningxView Answer on Stackoverflow
Solution 7 - d3.jsKarthiView Answer on Stackoverflow