title: Why are d3's select() and selectAll() behaving differently here?
body: <p>I am playing around with the <a href="http://bl.ocks.org/1557377">drag multiples example</a>, and I noticed something I can't explain.</p>
  
  <p>In this snippet:</p>
  
  
  
  <pre><code>var svg = d3.select("body").selectAll("svg")
      .data(d3.range(16).map(function() { return {x: width / 2, y: height / 2}; }))
      .enter().append("svg")
      .attr("width", width)
      .attr("height", height);
  </code></pre>
  
  <p>I changed <code>selectAll</code> to <code>select</code>.  It still works, but now the <code>svg</code> elements are added <em>after</em> the <code>&lt;/body&gt;</code> tag.  The original code, with <code>selectAll</code>, adds them after the <code>&lt;body&gt;</code> tag as you would expect.  </p>
  
  <p>Since the original html contains no hardcoded <code>&lt;svg&gt;</code> element, I would think that both <code>select</code> and <code>selectAll</code> just return the empty selection.  So I cannot figure out why they result in different behavior.</p>
  
  <p>I'm just looking for an explanation.  Thanks!</p>