d3 multiple cloning

Community Help
1

@mcmcclur I came across this wonderful post which I followed along for a use case that I have here.

I am trying to clone multiple nodes in the new location, but it is only cloning the first one.

Is there a way I can clone all of them?

Thank you in advance.

2

I don’t think that’s the issue; rather, selection.node() returns only the first node of the collection. Indeed, if you enter

d3.selectAll("g#valLine>path").clone(true).nodes()

into a separate cell, I think you’ll find that you get a list of several SVGPathElements. On the other hand,

d3.selectAll("g#valLine>path").clone(true).node()

yields just a single SVGPathElement.

Unfortunately, you can’t just change your node() to nodes(), because it’s a list, rather than any type of SVG element. Perhaps you could do something like:

let nodes = d3.selectAll("g#valLine>path").clone(true).nodes();
nodes.forEach(node => append_the_node)

Even simpler, you could select g#valLine and just clone and append that.

1 Like
3

@mcmcclur works !!!

    bound
        .insert('g', 'body > svg > g.bound > g.textLabel') // (inserting what, before what)
        .attr('class', 'textRect')

    d3.selectAll('body > svg > g > g.textLabel>text')
        .clone(true)
        .nodes()
        .forEach(
            (a) => d3.select('body > svg > g > g.textRect').append(() => a)
        )
4

Well, most excellent!

I gotta say that a selector like 'body > svg > g.bound > g.textLabel' seems amazingly specific. Unless there’s a highly detailed structure for your SVG that must be preserved, it seems like the code could be easier.

Nonetheless, have fun!