title: When using d3.js why must I call selectAll after select when appending new elements to an entry selection?
body: <p>Suppose we have a svg element with no child nodes:</p>
  
  <pre><code>&lt;svg id="bargraph" width="400" height="90" &gt;&lt;/svg&gt;
  </code></pre>
  
  <p>Suppose we also have an array of <em>data</em>:</p>
  
  <pre><code>var data = [10,20,30,40,50];
  </code></pre>
  
  <p>This code properly append new rect elements to the svg element.</p>
  
  <pre><code> d3.select("#bargraph")
   .selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("height", 10)
   .attr("width", function(d) { return d; })
   .attr("x", 0)
   .attr("y", function (d, i) { return i * 20; })
   .attr("fill", "blue");
  </code></pre>
  
  <p>The code below <strong>does not</strong> append new rect elements to the svg element.  Can you tell me why?</p>
  
  <pre><code> d3.selectAll("#bargraph rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("height", 10)
   .attr("width", function(d) { return d; })
   .attr("x", 0)
   .attr("y", function (d, i) { return i * 20; })
   .attr("fill", "blue");
  </code></pre>