🏠 back to Observable

D3.clone, how to select a destination

I am trying to copy a svg group from one cells svg into another cells svg.
D3.clone works well if i want to copy into the the same place it’s coming from but I can’t figure out how to select it’s destination. Or am I using the wrong D3 command?

Is this approximately what you’re talking about:??

1 Like

Thanks so much!

  // Here, we select svg1, then select the circle.
  // We also clone the circle since (as best as I understand)
  // it can only be produced once in the DOM.
  let other = d3.select(svg1);
  let circle = other.select('circle').clone(true);
  svg.append(() => circle.node());

That was the magic I was looking for.

2 Likes

I am trying to now clone the elements inside a group to populate a 2nd SVG using .join But it doesn’t kind of work as it’s appending the group inside the group and only doing it on the last one.

I am wondering if I need to pass the data in the .join()

or am I just building the SVG wrong and should just use other looping sytels.

maybe try and create one clone for each subgroup:

.append(() => group.clone(true).node())
2 Likes

Thanks, that did the magic