I've been trying, step by step, to convert some very nice but static & non-d3 chordname-to-waveform code for dynamic animation in a d3.js visualisation.
I've now reached a point where I have (in particular) two fully defined GUI elements, the first of which (plot) is already attached to the DOM:
var plot = plotframe
.append("svg")
.attr("whatever", ....
.. and the second (path, defined but as yet DOM-unattached) created using the following curious syntax:
var path = d3.select(document.createElementNS(d3.ns.prefix.svg, "svg:path"))
.attr("id", "path")
.attr("whatever", ....
Prior to my changes (these elements becoming the subject of d3 selections), the raw elements were hooked up using:
plot.appendChild(path);
However, as path is subject to some cute wave-building algorithms which it would be a shame to disturb, how could I do a purely retrospective attach of (the now both d3 selections) path to plot? Something similar to appendChild, but d3-friendly.. Does d3.js cater for this at all?
I'm aware this resembles an earlier question, but the answer provided there is clearly not what I'm looking for.
Thanks Thug
If both your selections each contain a single element, just extract the child element using selection.node() and then append it to the parent element.
You can either do that by extracting the node from the parent selection, and using element.appendChild( node ), or you can use selection.append( functionThatReturnsANode ). Like this:
var plot = plotframe
.append("svg")
.attr("whatever", ....
var path = d3.select(document.createElementNS(d3.ns.prefix.svg, "svg:path"))
.attr("id", "path")
.attr("whatever", ....
plot.append( function(){return path.node();} );
You must use a function to return the node, you can't pass the node directly as a parameter. This method was designed to work with selections containing many elements, and so you need a way of passing each one a different node to append.