title: d3.js: enter(), update, exit() with group element in between
body: <p>My DOM structure looks like this, when I rendered my visualization with D3.js and enter, update, exit pattern:</p>
  
  <pre><code>g
    rect
    ...
  g
    rect
    ...
  g
    rect
    ...
  </code></pre>
  
  <p>I am working with multiple elements and nested selections in my groups, but for simplicity I will demonstrate this with the rects. The DOM gets done by:</p>
  
  <pre><code>group = d3.select('.svg-content')
      .selectAll('g')
      .data(items, function (item) { return item.Id; });
  
  groupEnter = group.enter()
      .append('svg:g')
      .attr('class','group-content');
  
  // enter
  groupEnter.append('svg:rect')
      .style('fill', '#000')
      .attr('x', function (item) { return item.x })
      .attr('y', function (item) { return item.y; })
      .attr('width', function (item) { return item.width; })
      .attr('height', function (item) { return item.height; });
  
  // update
  group.select('rect') 
      .attr('x', function (item) { return item.x })
      .attr('width', function (item) { return item.width; });
  
  // remove
  group.exit().remove();
  </code></pre>
  
  <p>This works!</p>
  
  <p>Now I want to achieve the following:</p>
  
  <pre><code>g
    g
      rect
    ...
  g
    g
      rect
    ...
  g
    g
      rect
    ...
  </code></pre>
  
  <p>I want to encapsule the rect in another group element.</p>
  
  <pre><code>group = d3.select('.svg-content')
      .selectAll('g')
      .data(items, function (item) { return item.Id; });
  
  groupEnter = group.enter()
      .append('svg:g')
      .attr('class','group-content');
  
  // enter
  groupEnter
      .append('svg:g') // NEW
      .attr('class','rect-content') // NEW
      .append('svg:rect')
      .style('fill', '#000')
      .attr('x', function (item) { return item.x })
      .attr('y', function (item) { return item.y; })
      .attr('width', function (item) { return item.width; })
      .attr('height', function (item) { return item.height; });
  
  // update
  group
      .select('.rect-content') // NEW
      .select('rect') 
      .attr('x', function (item) { return item.x })
      .attr('width', function (item) { return item.width; });
  
  // remove
  group.exit().remove(); // NOTE: without this, it works!
  </code></pre>
  
  <p>What is wrong with this code? Without the remove block it works, but I need this to handle new/removed items. How to make it right?</p>