CODEWITHSUNDEEP
javascriptajaxsvgd3.js
Sami
Sami

Reputation: 7837

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?

Upvotes: 230

Views: 277087

Answers (8)

pink_daemon
pink_daemon

Reputation: 374

I followed 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()

Upvotes: 2

bryce
bryce

Reputation: 3051

If you want to get rid of all children,

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

will remove all content associated with the svg.

Upvotes: 173

Sami
Sami

Reputation: 7837

Here is the solution:

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

This is a remove function provided by D3.js.

Upvotes: 314

cjungel
cjungel

Reputation: 3791

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

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

Upvotes: 5

Stirling
Stirling

Reputation: 4378

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.

Upvotes: 38

user1608171
user1608171

Reputation:

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

Upvotes: 66

Shailender Singh
Shailender Singh

Reputation: 260

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

Upvotes: 9

Sprintstar
Sprintstar

Reputation: 8169

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

Upvotes: 4

Related Questions