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");
    })

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

1 个答案: