How can I remove or replace SVG content?

How can I remove or replace SVG content?

I have a piece of JavaScript code which creates (using D3.js) an svg element which contains a chart. I want to update the chart based on new data coming from a web service using AJAX, the problem is that each time I click on the update button, it generates a new svg, so I want to remove the old one or update its content.
Here is a snippet from the JavaScript function where I create the svg:
var svg = d3.select(“body”)
.append(“svg”)
.attr(“width”, w)
.attr(“height”, h);

How can I remove the old svg element or at least replace its content?

Solutions/Answers:

Solution 1:

Here is the solution:

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

This is a remove function provided by D3.js.

Solution 2:

If you want to get rid of all children,

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

will remove all content associated with the svg.

Note: This is recommended in case you want to update chart.

Solution 3:

Setting the id attribute when appending the svg element can also let d3 select so remove() later on this element by id :

var svg = d3.select("theParentElement").append("svg")
.attr("id","the_SVG_ID")
.attr("width",...

...

d3.select("#the_SVG_ID").remove();

Solution 4:

I had two charts.

Related:  Why let and var bindings behave differently using setTimeout function? [duplicate]
<div id="barChart"></div>
<div id="bubbleChart"></div>

This removed all charts.

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

This worked for removing the existing bar chart, but then I couldn’t re-add the bar chart after

d3.select("#barChart").remove();

Tried this. It not only let me remove the existing bar chart, but also let me re-add a new bar chart.

d3.select("#barChart").select("svg").remove();

var svg = d3.select('#barChart')
       .append('svg')
       .attr('width', width + margins.left + margins.right)
       .attr('height', height + margins.top + margins.bottom)
       .append('g')
       .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');

Not sure if this is the correct way to remove, and re-add a chart in d3. It worked in Chrome, but have not tested in IE.

Solution 5:

I am using the SVG using D3.js and i had the same issue.

I used this code for removing the previous svg but the linear gradient inside SVG were not coming in IE

$(“#container_div_id”).html(“”);

then I wrote the below code to resolve the issue

$('container_div_id g').remove();
$('#container_div_id path').remove();

here i am removing the previous g and path inside the SVG, replacing with the new one.

Related:  show validation error messages on submit in angularjs

Keeping my linear gradient inside SVG tags in the static content and then I called the above code, This works in IE

Solution 6:

You could also just use jQuery to remove the contents of the div that contains your svg.

$("#container_div_id").html("");