d3.js : group dynamic SVG elements based on data - d3.js

Question

I do have a d3.scaleTime() as x-axis and JSON data with dates, which should be represented as an rect on this x-axis, in order to mark the date as "reserved".
The simple way is
this.svg.selectAll('rect').data(dates).enter().each(function(d) {
d3.select(this)
.append("rect")
.attr('height', desiredHeight)
.attr('width', desiredWidthFromTickToTick)
.attr('x', x(d.date));
}
But I would like to group rects, if they have consecutive dates, in order to be able to move the group around on the x-axis.
What I did / tried is in the enter / each function to check, if there is already a group with a date "next" to the current date.
If not, create a new group and append the current date-rect.
If there is a group, get the group and append the date-rect to the existing group.
But now, the problem is, that the rects don't keep their data and / or I can't add the rect to the group properly.
Some (pseudo)code:
var rects = this.svg.selectAll('rect') .data(dates, function(dataElement) {
return dataElement.id;
});
// add new date rects
rects.enter().each(function(dataElement) {
var isNewDateGroup = true / false; // detect if date is "next" to another one
if (isNewDateGroup)
{
var group = svg.append("g");
var dateRect = d3.select(this)
.append("rect")
.attr('height', desiredHeight)
.attr('width', desiredWidthFromTickToTick);
group.append(function() {
// works correctly, appends the rect and sets the data
return dateRect.select('rect').node();
});
// translate group to desired x(d.date)
}
else
{
var group = getGroupForDate();
var dateRect = d3.select(this)
.append("rect")
.attr('height', desiredHeight)
.attr('width', desiredWidthFromTickToTick)
.attr('x', offsetToLastRectInGroup);
group.append(function() {
// does not work correctly, does not append the rect and does not set the data
return dateRect.select('rect').node();
});
}
});
Basically, the enter function does not work, if I append more then one SVG element, since the data gets confused and the appending as well.
Any hints, how I can group my rects?

Answer 1

The answer on this question helped me to solve my problem:
Since .select() propagate the data to the selected elements, I just have to get rid of the selection:
var dateRect = d3.select(this)
.append("rect")
.attr('height', desiredHeight)
.attr('width', desiredWidthFromTickToTick)
.attr('x', offsetToLastRectInGroup);
group.append(function() {
return dateRect.node();
});