Clone an element in D3js and append into another wrapper

Posted on February 25, 2023

This looked like a very easy task at first, but, as happen often, it wasn't.

I wanted to clone an SVG element from one wrapper and append it to another wrapper. It turned out it requires a little trick I wasn't aware of.

Here the solution, by the way:

// given an existing svg wrapper, I'm appending two groups
const g1 = svg.appeng('g')
const g2 = svg.append('g')

// the original circle
const circle = g1.append('circle')

// the cloned one using the `clone` function from D3.js
const cloned = circle.clone()

// here the real trick, because just using g2.append(cloned) doesn't work
g2.append(() => circle.node())

We need to use a function instead passing the cloned selection. I don't really know why, though.