How to add back to DOM an existing D3 SVG chart?

Question

Hi have a D3 SVG object:

 d3.select("#chart").append("svg")
.attr('id', 'chartId' + idx)

To which I append rects to create a bar chart.

I would like to be able to add and remove it from the DOM.

I am able to remove it easily with:

d3.select('svg#chartId' + j).remove();

How can I re-append the entire SVG chart I just removed?

Answer 1

D3 doesn't support reattaching nodes that have been deleted.

selection.remove() doesn't completely destroy the node though, it acts quite similarly to jQuery's detach() method. (Using jQuery with SVG elements never ends well)

The good news is that this is pretty easy with the built-in SVG DOM.

// .remove() returns the detached node.
var el = d3.select('.selection').remove();
var nativeEl = el[0][0];
nativeEl.parentNode.appendChild(nativeEl);

Usually it would probably just be easier to show and hide these elements, but in cases like re-arranging the order of elements post-render, this can be pretty useful.

Answer 2

Use detach() instead of remove()

var refToElelment = $(d3.select('svg#chartId' + j)).detach();

OR

$('#chartId' + j).detach()

Later..

$('#target').append(refToElelment);