d3.js: enter(), update, exit() with group element in between

Question

My DOM structure looks like this, when I rendered my visualization with D3.js and enter, update, exit pattern:

g
  rect
  ...
g
  rect
  ...
g
  rect
  ...

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:

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();

This works!

Now I want to achieve the following:

g
  g
    rect
  ...
g
  g
    rect
  ...
g
  g
    rect
  ...

I want to encapsule the rect in another group element.

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!

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?

Answer 1

The problem is that you're selecting plain g elements to bind the data to (.selectAll('g').data(...)). This works fine when there's only one level of those elements, but as .selectAll() works recursively, it will select many more elements than you would think when you have the nested structure.

That is, the selection contains many more elements, which "consume" the bound data. So the data doesn't end up being matched to the correct elements.

To fix, simply make the selector more specific:

group = d3.select('.svg-content')
    .selectAll('g.group-content')
    .data(...);

Complete demo here.