D3: Append duplicates of a selection

d3.js, svg

Solution

Here's another possibility: do things the long way. This gets round the problem with using `<use>` elements where you can't set the `style` or `transform` attributes separately.

I'm surprised the amazing `d3js` library doesn't feature something like this natively, but here's my hack:

function clone_d3_selection(selection, i) {
            // Assume the selection contains only one object, or just work
            // on the first object. 'i' is an index to add to the id of the
            // newly cloned DOM element.
    var attr = selection.node().attributes;
    var length = attr.length;
    var node_name = selection.property("nodeName");
    var parent = d3.select(selection.node().parentNode);
    var cloned = parent.append(node_name)
                 .attr("id", selection.attr("id") + i);
    for (var j = 0; j < length; j++) { // Iterate on attributes and skip on "id"
        if (attr[j].nodeName == "id") continue;
        cloned.attr(attr[j].name,attr[j].value);
    }
    return cloned;
}

Problem

I'd like to create a javascript function which can take a generic D3 selection, and append duplicates of it to an SVG object. Here's a minimum working example: ``` <!DOCTYPE html> <meta charset="utf-8"> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> svg = d3.select("body").append("svg") .attr("width", 300) .attr("height", 300); circle = svg.append("circle") .attr("cx", 100) .attr("cy", 100) .attr("r", 20) function clone_selection(x, i) { for (j = 0; j < i; j++) { // Pseudo code: // svg.append(an exact copy of x, with all the attributes) } } clone_selection(circle, 5); </script> ``` Mike Bostock said that this was impossible here but that was a while back. Does anyone have any new thoughts about how this might be achieved? Remember, inside the function `clone_selection` we have no idea what svg element(s) is/are in x.

Original source