title: Nested SVG node creation in d3.js
body: <p>I'v just started playing with d3js and find it strange that I have to create multiple selectors for each element I want to link to the background data structure for example separate selectors such as one for overlay text and one for rectangles to make an annotated bar graph.</p>
  
  <pre><code>svg.selectAll("rect")
  .data(data)
  .enter()
      .append("rect")
      .attr('y',function(d,i){return i*10;})
      .attr('height',10)
      .attr('width',function(d){return d.interestingValue})
      .fill('#00ff00');
  
  svg.selectAll("text")
  .data(data)
  .enter()
      .append("text")
      .attr('y',function(d,i){return i*10;})
      .fill('#0000ff')
      .text(function(d){return d.interestingValue});
  </code></pre>
  
  <p>Is there a more convenient way of combining these into a single selection and enter() chain that creates both the rects and the text elements?</p>