How can I remove or replace SVG content?
var svg = d3.select(“body”)
How can I remove the old svg element or at least replace its content?
Here is the solution:
This is a
remove function provided by D3.js.
If you want to get rid of all children,
will remove all content associated with the svg.
Note: This is recommended in case you want to update chart.
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();
I had two charts.
<div id="barChart"></div> <div id="bubbleChart"></div>
This removed all charts.
This worked for removing the existing bar chart, but then I couldn’t re-add the bar chart after
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.
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
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.
Keeping my linear gradient inside SVG tags in the static content and then I called the above code, This works in IE
You could also just use jQuery to remove the contents of the div that contains your svg.