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("stroke", "black");

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

任何延迟调用

的方法

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

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

加载后处理外部XML文件

1 个答案: