title: D3.js: how to follow general update pattern to transition nested elements?
body: <p>I am working with D3.js, and learning the <a href="http://bl.ocks.org/mbostock/3808234" rel="nofollow">general update pattern</a>. </p>
  
  <p>I understand it for simple data structures (I think!), but I would like to create a nested set of DOM elements: groups which contain paths and text elements. I'm not clear on how to access the update/enter/exit selection for the <em>nested</em> elements.  </p>
  
  <p>In summary, this is the SVG structure that I want to end up with: </p>
  
  <pre><code>&lt;g class="team"&gt;
  &lt;path class="outer" d="..."&gt;&lt;/path&gt;
  &lt;text class="legend" x="890" dy=".2em" y="23"&gt;Red Sox&lt;/text&gt;   
  &lt;/g&gt;
  &lt;g class="team"&gt;
  &lt;path class="outer" d="..."&gt;&lt;/path&gt;
  &lt;text class="legend" x="890" dy=".2em" y="23"&gt;Yankees&lt;/text&gt;   
  &lt;/g&gt;
  </code></pre>
  
  <p>And I'd like to be able to access the update/enter/select selection explicitly on each element. My data looks like this: </p>
  
  <pre><code>[
  { "name": "Red Sox", "code": "RED", "results": [...] }, 
  { "name": "Yankees", "code": "YAN", "results": [...] }, 
  ]
  </code></pre>
  
  <p>And this is my code - see it in full at the jsfiddle: <a href="http://jsfiddle.net/e2vdt/6/" rel="nofollow">http://jsfiddle.net/e2vdt/6/</a></p>
  
  <pre><code>function update(data) { 
  
    // Trying to follow the general update pattern:
    // http://bl.ocks.org/mbostock/3808234
  
    // Join new data with old elements, if any.
    var g = vis.selectAll("g.team").data(data, function(d) { 
      return d.code;  
    });
  
    // Update old elements as needed. 
    // QUESTION: How to get the update selection for the text elements?
    // Currently the text element is not moving to the right position. 
    g.selectAll("text.legend").transition()
      .duration(750)
      .attr("y", function(d, i) { return i * 32 + 100; });
  
    // Create new elements as needed.
    var gEnter = g.enter()
        .append("g").attr("class","team");
    gEnter.append("text").attr("class", "legend")
        .attr("dy", ".35em")
        .attr("y", function(d, i) { return i * 32 + 100; })
        .attr("x", "20")
        .style("fill-opacity", 1e-6)
        .text(function(d) { return d.name; })
        .transition()
        .duration(750)
        .style("fill-opacity", 1);
    // TBA: Add path element as well. 
  
    // Remove old elements as needed.
    g.exit()
      .transition()
      .duration(750)
      .attr("y", "0")
      .style("fill-opacity", 1e-6)
      .remove();
  
  }
  </code></pre>
  
  <p>The enter and exit selections are both working fine, but I don't know how to get the update selection so I can move the text labels to the correct position. The "Red Sox" entry should be moving down the page, but it isn't. </p>