2015-10-02 49 views
1

這是一個抽象問題。我引用邁克·博斯托克的代碼導入外部svg文件:http://bl.ocks.org/mbostock/1014829D3js - 單個外部SVG文件的多個實例

我的計劃是使用外部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'); 
} 
+0

包括他們通過''或''