title: D3: data, enter, append pattern adds data to outer block
body: <p>I'm using the D3 javascript library to render some basic web charts.  I want to add three <code>&lt;path&gt;</code> elements to an <code>&lt;svg&gt;</code> block, but D3 is adding the elements to the end of the <code>&lt;html&gt;</code> block instead.  Here's the complete html source:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;body&gt;
  &lt;script src="d3.v2.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var chartData = [ 1, 2, 3 ];
  d3.select("html").select("body").append("svg")
    .data(chartData, function(d) { console.log("data d:", d); return d; })
    .enter()
      .append("path")
        .attr("d", function(d) { return d; });
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Chrome's developer console shows the resulting html to be:</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;
  &lt;style type="text/css"&gt;&lt;/style&gt;&lt;/head&gt;&lt;body&gt;
  &lt;script src="d3.v2.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var chartData = [ 1, 2, 3 ];
  d3.select("html").select("body").append("svg")
    .data(chartData, function(d) { console.log("data d:", d); return d; })
    .enter()
      .append("path")
        .attr("d", function(d) { return d; });
  &lt;/script&gt;&lt;svg&gt;&lt;/svg&gt;
  &lt;/body&gt;&lt;path d="1"&gt;&lt;/path&gt;&lt;path d="2"&gt;&lt;/path&gt;&lt;path d="3"&gt;&lt;/path&gt;&lt;/html&gt;
  </code></pre>
  
  <p>The <code>&lt;svg&gt;</code> block was created, but for some reason, the <code>&lt;path&gt;</code> blocks are outside of it.  How can I correct this error, and put them inside the <code>&lt;svg&gt;</code> where they belong?</p>