javascript - 加载外部 XML 文件后对其进行操作

Question

我已经使用 d3.xml() 和 queue.js 加载了几个外部 SVG 文件。图书馆。我可以使用以下代码 ( JSFiddle ) 在加载每个文件时对其进行操作(更改其位置和颜色):

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)
    .enter().append('g').attr('class', 'shape')  
    .attr('transform', function() {
      return 'translate(' + Math.random()*(width-50) + ',' + Math.random()*(height-50) + ')'
    })
    .each(function(d,i) {
      this.appendChild(results[i].documentElement);
      d3.select(this).select('svg').select("*")
        .attr("transform", "scale(0.2)")
        .attr("stroke", function() { return d.color; });
    })
});

我想在形状全部加载后像普通 d3 对象一样访问它们。例如，在如上所示读取它们后，我想执行一个简单的转换以使它们全黑:

sampleSVG.select(".shape svg *").transition().delay(1000).attr("stroke", "black");

但这行不通。

如何读取这些外部 SVG 文件以便我可以像平常一样进行操作？

Answer 1

您正尝试在创建 SVG 形状之前更新它们的颜色。如果您移动

sampleSVG.select(".shape svg *").transition().delay(1000).attr("描边", "黑色");

在 q.awaitAll(...) 函数中，它将在 DOM 中创建形状后运行，并且选择将起作用。

任何延迟调用的方法

sampleSVG.select(".shape svg *").transition().delay(1000).attr("描边", "黑色");

直到 DOM 操作完成之后才可以工作。您可以将其包装在函数调用中，并在 q.awaitAll(...) 末尾调用该函数，或者您可以额外使用 queue 库，与您当前使用它的方式类似。