How can I remove or replace SVG content?

javascript ajax svg d3.js

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?

github.com/mbostock/d3/wiki/Selections#wiki-remove

@ Felix Kling Thanks :) the remove function from D3.js solved it var svg1 = d3.select("svg") .remove();

you can use d3.select("svg").empty();

I did some svg without d3, and if an element (in my case a path) was given an id "p_1", then I could do var el = document.querySelector("#p_1"); el.parentElement.removeChild(el);

itsjeyd

Here is the solution:

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

This is a remove function provided by D3.js.

actually if you want to remove elements from svg it would be better to use: svg.selectAll("*").remove();. This clear contents of the element even if set svg variable to a grouping element (g).

@Nux because of you I'm leaving on time today. d3.html('') does not work in Safari.

Thanks, however if i remove a chart and then immediately try to add a new chart, it does not get added? Any suggestion, thank you.

The code above removes the entire svg element which contains the chart. you would need to create a new svg element to add a new chart I guess.

Strange that the Safari bug still exists. They should patch that.

bryce

If you want to get rid of all children,

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

will remove all content associated with the svg.

I recommend this if you want to update a chart. Remove their children then append the new ones.

I used this answer to solve my problem, this answer clear all the created contents inside svg tag, and I can update my charts after clearing contents

Will this remove any associated event listeners, that are assigned to children in SVG?

佚

佚名

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

this is a much safer/cleaner solution than the one selected as answer. by selecting svg using id, one can avoid messing up other svg elements that might exist on the same page. please upvote this.

I used this in the past and this is a precise solution. Adding an id also documents the nodes.

Stirling

I had two charts.

<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.

Shailender Singh

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.

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

cjungel

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

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

Not a great idea to use jQuery for DOM manipulation when you are already using a great tool for this job in D3. Especially if you don't otherwise have jQuery in use.

Sprintstar

You should use append("svg:svg"), not append("svg") so that D3 makes the element with the correct 'namespace' if you're using xhtml.

pink_demon

I follow the code from https://www.d3-graph-gallery.com/graph/line_basic.html and had this code:

svg.append("path")
  .datum(filteredData)
  .attr("fill", "none")
  .attr("stroke", "blue")
  .attr("stroke-width", 1.5)
  .attr("d", d3.line()
    .x(function(k) { return x(k.date) })
    .y(function(k) { return y(k.value) })
   )

So for me it turned out to be that I slap this right before the generation of new line:

d3.selectAll("path").remove()

How can I remove or replace SVG content?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US