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 me

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.