Question

163

Deleting d3 svg elements for redraw

rated 0 times [ 170] [ 7] / answers: 1 / hits: 23362 / 10 Years ago, thu, march 13, 2014, 12:00:00

I hope you can help me, because this is driving me nuts!

So i was trying to redraw a svg using d3. In my code i add the svg using:

d3.xml(Images/vertical_line.svg, image/svg+xml, function(xml) {



  var importedNode = document.importNode(xml.documentElement, true);

  var svg = d3.select('#'+id+'_verticallinecontainer').node().appendChild(importedNode);



  });

When my update function is called i then proceed to remove the element:

d3.select(#+id+'_verticallinecontainer').remove();

This removes the container and the element. I then proceed with redrawing the svg again using the above code.

My problem is that when it appends the svg again it does it twice and i do not understand why! It seems that d3 somehow caches the svg, adding it again.

Hope you can help to clear out what is wrong, any help would be appreciated!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jamaal

Add To Favorites

Follow

Total Points: 515

Total Questions: 102

Total Answers: 107

Location: France

Member since Thu, May 6, 2021

3 Years ago

answered 10 Years ago dominickmackenziet · Accepted Answer

FIDDLE with a quick example of adding, removing and the adding again an SVG and a contained circle. Hope this helps.

function update() {

    svg.remove();

    svg = d3.selectAll(body).append(svg);

    svg.append(circle)

        .attr(cx,40)

        .attr(cy,40)

        .attr(r,20)

        .style(fill,blue);

}