title: Code execution not linear (?) in D3 for loop
body: <p>I'm doing a pretty trivial thing in D3, but I'm running into weird issues with the order of code execution. I'm taking an array of image names, looping through them, and adding each <code>svg</code> to a parent <code>svg</code> as a <code>g</code> element. All that works great. Here's the code that's doing so:</p>
  
  <pre><code>var names = ['a', 'b', 'c']
  var over = d3.select('#overlay');
  var w = 20;
  for (var i = names.length - 1; i &gt;= 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)
    })
  }
  </code></pre>
  
  <p>However, I'm running into issues with the transforms all being the same, and decided to log x to check it out. The log should be this:</p>
  
  <pre><code>1. 60
  2. 60
  1. 40
  2. 40
  1. 20
  2. 20
  </code></pre>
  
  <p>Instead, it's logging this:</p>
  
  <pre><code>1. 60
  1. 40
  1. 20
  2. 20
  2. 20
  2. 20
  </code></pre>
  
  <p>What could possibly be making this run out of order like that?? Is the <code>d3.xml</code> call asynchronous? I can't figure it out.</p>