Question

我在D3中做了一件非常简单的事情，但是我遇到了代码执行顺序的奇怪问题。我正在使用一系列图像名称，循环遍历它们，并将每个svg添加到父svg作为g元素。一切都很好。这是代码：

var names = ['a', 'b', 'c']
var over = d3.select('#overlay');
var w = 20;
for (var i = names.length - 1; i >= 0; i--) {
  var x = w * i + w
  console.log('1. '+ x)
  d3.xml(names[i]+'.svg', function(error, xml) {
    console.log('2. '+ x)
    over.append('g')
    .attr('transform','translate('+ x +','+ 20 +')')
    .html(xml.getElementsByTagName('svg')[0].innerHTML)
  })
}

但是，我遇到的变换问题都是一样的，并决定记录x来检查它。日志应该是这样的：

相反，它记录了这个：

有什么可能让这样的运行失序？ d3.xml调用是否异步？我无法理解。

Answer 1

d3.xml()是异步函数，并不是按预期顺序启动的，但稍后就足够了，循环结束并且x的值为20.

您必须使用例如：

对值x进行闭包

  (function (x) {
      d3.xml(names[i]+'.svg', function(error, xml) {
        console.log('2. '+ x)
        over.append('g')
        .attr('transform','translate('+ x +','+ 20 +')')
        .html(xml.getElementsByTagName('svg')[0].innerHTML)
      });
  })(x)

这样你就会进入控制台日志：

D3 for循环中的代码执行不是线性的（？）

1 个答案: