D3.js add nested data to parent group - d3.js

Question

I have a 'parent' rectangle which has been drawn around smaller rectangles. Here's a live example
The data looks like this:
var allData = [{x:50, y: 60, height: 40, width: 30,
defects: [
{ x: 53, y: 61, width: 10, height: 10 },
{ x: 55, y: 71, width: 10, height: 10 },
{ x: 60, y: 76, width: 10, height: 10 }]},
{x:150, y: 160, height: 50, width: 40,
defects: [
{ x: 151, y: 165, width: 5, height: 5 },
{ x: 160, y: 169, width: 5, height: 5 },
{ x: 165, y: 170, width: 5, height: 5 }]
}];
As you can see, there are 2 rectangles each with 3 smaller rectangles in it called defects.
I'm trying to visualize it but want to do it in 1 selection so I can transform it easier later on.
Here's what I got so far:
var svg = d3.select('#test svg')
.attr("width", 800)
.attr("height", 500);
var groups = svg.selectAll('.defect-group')
.data(allData)
.enter()
.append('g').attr('class', 'defect-group')
.append('rect')
.attr('class', 'defect-area')
.attr('width', function(d) {return d.width})
.attr('height', function(d) {return d.height})
.attr('x', function(d) {return d.x})
.attr('y', function(d) {return d.y});
var defects = groups.selectAll('.defects')
.data(function(d) {
return d.defects;
})
.enter()
.append('rect')
.attr('class', 'defect')
.attr('width', function(d) {return d.width})
.attr('height', function(d) {return d.height})
.attr('x', function(d) {return d.x})
.attr('y', function(d) {return d.y});
The result of this is:
As you can see, I (accidentally) nested the defects inside the 'rect' elements. Since a rect cannot have child elements I would like to put the defects also in the 'defect-group' group, I've tried but can't seem to figure out how to put those in the parent group.
How to do this?

Answer 1

Just get the g element out and append everything to that.
In your code, change
var groups = svg.selectAll('.defect-group')
.data(allData)
.enter()
.append('g').attr('class', 'defect-group')
.append('rect')
.attr('class', 'defect-area')
.attr('width', function(d) {return d.width})
.attr('height', function(d) {return d.height})
.attr('x', function(d) {return d.x})
.attr('y', function(d) {return d.y});
to
var groups = svg.selectAll('.defect-group')
.data(allData)
.enter()
.append('g').attr('class', 'defect-group')
groups
.append('rect')
.attr('class', 'defect-area')
.attr('width', function (d) { return d.width })
.attr('height', function (d) { return d.height })
.attr('x', function (d) { return d.x })
.attr('y', function (d) { return d.y });