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

my dom structure looks this, when rendered visualization d3.js , enter, update, exit pattern:

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

i working multiple elements , nested selections in groups, simplicity demonstrate rects. 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 want achieve following:

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

i want encapsule rect in 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, works! 

what wrong code? without remove block works, need handle new/removed items. how make right?

the problem you're selecting plain g elements bind data (.selectall('g').data(...)). works fine when there's 1 level of elements, .selectall() works recursively, select many more elements think when have nested structure.

that is, selection contains many more elements, "consume" bound data. data doesn't end being matched correct elements.

to fix, make selector more specific:

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

complete demo here.