D3如何用复杂的对象绘制

Question

我有一个这样的数据集：

var barData =  [{'label':'Group 1', 'data':[{'x':'Jan 2000','y':0},{'x':'Jan 2001','y':5},{'x':'Jan 2003','y':10},{'x':'Jan 2004','y':0},{'x':'Jan 2005','y':6},{'x':'Jan 2006','y':11},{'x':'Jan 2007','y':9},{'x':'Jan 2008','y':4},{'x':'Jan 2009','y':11},{'x':'Jan 2010','y':2}]},
    {'label':'Group 2', 'data':[{'x':'Jan 2000','y':1},{'x':'Jan 2001','y':6},{'x':'Jan 2003','y':11},{'x':'Jan 2004','y':1},{'x':'Jan 2005','y':7},{'x':'Jan 2006','y':12},{'x':'Jan 2007','y':8},{'x':'Jan 2008','y':3},{'x':'Jan 2009','y':13},{'x':'Jan 2010','y':3}]},  
];

因此，对象中有一个数组在数组中。我希望结果从开始日期到开始日期+30天绘制框。因此，对于第1组，每个开始日期应该绘制一个水平线框。

这是一张图片：

var barGroup = chart.append('g');
barGroup.selectAll('g')
.data(barData, function (data) {
    data.data.forEach(function (d, i) {
        var bar = barGroup.append('rect');
        bar.attr('x', x(new Date(d.x)))
           .attr("class", "bar-group")
           .attr('width', 10)
    });
    return data.data
})
.enter()
.append('rect')
//.attr("class", "bar-group")
.attr('height', barY.rangeBand() - 2)
.attr('y', function (data, index) { 
    console.log(data);//i need to loop through this and draw a box for each of these on the same line.
    return barY(index); 
})
.attr('width', width)
.attr('style', 'background: #ccc')

编辑：

新小提琴：http://jsfiddle.net/5kLeag9m/3/

我越来越近，只是无法弄清楚为什么我看不到嵌套的矩阵