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.