读入和操作多个外部 SVG 文件

Question

我有几个想要展示的外部 SVG 文件（路径和多边形的各种形状）。对于每种形状，我想在随机位置以不同的笔触颜色呈现它们。

我可以使用d3.xml()一次成功读取一个，更改其属性等。

var sampleSVG = d3.select("body")
    .append("svg")
    .attr("width", 300)
    .attr("height", 300);  

var shapes = ["https://dl.dropboxusercontent.com/u/2467665/shapes-24.svg", 
          "https://dl.dropboxusercontent.com/u/2467665/shapes-23.svg"];

d3.xml("https://dl.dropboxusercontent.com/u/2467665/shapes-24.svg", "image/svg+xml", 
       function(xml) {
             sampleSVG.node().appendChild(xml.documentElement);

             var innerSVG = sampleSVG.select("svg");

             innerSVG
                 .select("*")//selects whatever the shape is, be it path or polygon
                 .attr("transform", "translate("+Math.floor(Math.random() * 100)+","+Math.floor(Math.random() * 100)+") scale(.3)")
                 .attr("stroke", "purple");
      });

从我的阵列中读取多个外部文件的最佳方法是什么？以及如何独立操作每个文件的位置和属性？

Answer 1

您可以使用 D3.js 作者的 queue.js 库等待所有文件返回，然后再渲染导入的 svg。请参见下面的示例。

var width = 300, height = 300;
var sampleSVG = d3.select("body")
    .append("svg")
    .attr( {width: width, height: height} );

var shapes = [
  { url: "https://dl.dropboxusercontent.com/u/2467665/shapes-24.svg", color: 'purple' },
  { url: "https://dl.dropboxusercontent.com/u/2467665/shapes-23.svg", color: 'red' }
];

var q = queue();
shapes.forEach(function(shape) { 
  q.defer(d3.xml, shape.url, "image/svg+xml"); 
});

q.awaitAll(function(error, results) { 
  sampleSVG.selectAll('g.shape').data(shapes)
    // g tag is created for positioning the shape at random location
    .enter().append('g').attr('class', 'shape')  
    .attr('transform', function() {
      return 'translate(' + Math.random()*(width-50) + ',' + Math.random()*(height-50) + ')'
    })
    .each(function(d,i) {
      // the loaded svg file is then appended inside the g tag
      this.appendChild(results[i].documentElement);
      d3.select(this).select('svg').select("*")
        .attr("transform", "scale(0.2)")
        .attr("stroke", function() { return d.color; });
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>