D3 Examples - Append node already in the DOM

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
<title></title>
</head>
<style type="text/css">
</style>
<body>
​
<div id="viz">
​
<script type="text/javascript">
var toAppend = d3.select("#viz")
    .append("svg:circle")
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", 25)
    .attr("fill", "dodgerblue");
​
var importedNode = document.importNode(toAppend.node(), true);
​
var rootSVG = d3.select("#viz")
    .append("svg:svg")
    .attr("width", 200)
    .attr("height", 100)
    .style("background-color", "skyblue");
    
rootSVG.append("svg:rect")
    .attr("x", 50)
    .attr("y", 10)
    .attr("width", 100)
    .attr("height", 75)
    .attr("fill", "blue");
​
rootSVG.node().appendChild(importedNode);
</script>
</body>
</html>
    