Can I move an SVG element between SVG groups, in d3.js

Question

Can I move an SVG element between SVG groups - without stirring too much calculation behind the scenes nor crafting too much code in my own code? The d3 api documentation mentions you cannot re-append removed elements (?).

Recreating the element after removing it from its original group - may seem to be cumbersome in my code, and more expensive for d3 and the browser than it could be if that were possible.

This is also relevant for defining an element before associating it with a group, not just for really moving it between groups (i.e. for moving an element from a non-group to a group).

Answer 1

The docs you posted also mention that you can re-add the elements by passing a function to .append or .insert. Here's what it says:

Note that there is not currently a dedicated API to add removed elements back to the document; however, you can pass a function to selection.append or selection.insert to re-add elements.

---

Since using .remove on a selection returns that selection, you could store the removed element in a variable, and then .append it to the new group using selection.node() to grab the DOM element from the removed selection:

var removed = yourSelection.remove();
yourTargetGroup.append(function() {
  return removed.node();
});

Here's a simple Fiddle that uses this technique to move a circle element from one group to another in a click handler.

Answer 2

To just move around existing nodes within the DOM tree it is not necessary to first remove them to later re-append those same nodes at a different position. d3.append() internally uses Node.appendChild() which works as follows:

If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).

This means that a node can't be in two points of the document simultaneously. So if the node already has a parent, the node is first removed, then appended at the new position.

As other answerers have already mentioned both selection.append() and selection.insert() when being passed a function will append or insert, respectively, the node returned by that function. Knowing that, all it takes to move around a DOM node from its current position to a new target is

target.append(() => existingNode);  // target is a D3 selection, existingNode is a native DOM node

Having this in your toolbox it is also fairly easy to move around multiple nodes at once:

selectionToBeMoved.each(function() { target.append(() => this); });

Have a look at the following demo to see it in action. The two circles colored in Aquamarine are move from group #g1 to group #g2.

const current = d3.select("#g1");
const target  = d3.select("#g2");

current.selectAll("circle[fill=Aquamarine]")
  .each(function() { target.append(() => this); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"></script>

<svg>
  <g id="g1">
    <circle cx="100" cy="100" r="20" fill="Aquamarine" />
    <circle cx="150" cy="100" r="20" fill="HotPink" />
    <circle cx="200" cy="100" r="20" fill="Aquamarine" />
  </g>
  <g id="g2">
  </g>
</svg>