D3js - 单个外部 SVG 文件的多个实例

Question

这是一个抽象的问题。我引用 Mike Bostock 的 代码来导入外部 svg 文件：http://bl.ocks.org/mbostock/1014829

我的计划是使用外部SVG 作为icon（或sprite），将在一个界面中多次使用。有没有一种方法可以创建下面的xml.documentElement 的副本？总之，如何在不为每个实例加载文件的情况下创建一个svg 文件的多个实例？

d3.xml("rect01.svg", "image/svg+xml", function(xml) {
document.body.appendChild(xml.documentElement);
});

最终目标是将外部svg 添加到从此示例创建的网格中的每个单元格：http://bl.ocks.org/bunkat/2605010

参考上面的链接，如何将xml.documentElement 数据放入下面代码中的网格中，使外部svg 可见，而不是矩形？

   var col = row.selectAll(".cell")
                 .data(function (d) { return d; })
                .enter().append("svg:rect")
                 .attr("class", "cell")
                 .attr("x", function(d) { return d.x; })
                 .attr("y", function(d) { return d.y; })
                 .attr("width", function(d) { return d.width; })
                 .attr("height", function(d) { return d.height; })
                 .on('mouseover', function() {
                    d3.select(this)
                        .style('fill', '#0F0');
                 })
                 .on('mouseout', function() {
                    d3.select(this)
                        .style('fill', '#FFF');
                 })
                 .on('click', function() {
                    console.log(d3.select(this));
                 })
                 .style("fill", '#FFF')
                 .style("stroke", '#555');
}

Answer 1

引用this jsfiddle，我需要的代码行是cloneNode(true)：

.each(function(d, i){ 
        var plane = this.appendChild(importedNode.cloneNode(true)); 
        d3.select(plane).select("path").attr("fill", "blue");
    })