D3.js：多个rects中的多行

Question

我想基于两个时间戳绘制多个矩形。之后我想附加多行来根据它们的时间戳垂直修剪它们的父矩形。我的数据如下：

    var data = [
    {id: "1", 
    timeStart: "22.10.2012", 
    timeEnd: "28.11.2012", 
    intervals: [ timeOne: "23.10.2012", timeTwo: "25.10.2012", timeThree: "25.11.2012"] },
    {id: "2", 
    timeStart: "26.10.2012", 
    timeEnd: "29.10.2012", 
    intervals: [ timeOne: "27.10.2012", timeTwo: "28.10.2012"] },
    {id: "3", 
    timeStart: "29.10.2012", 
    timeEnd: "28.11.2012", 
    intervals: [ timeOne: "23.11.2012"] },
]

正如您所看到的，间隔数组可以具有不同的长度，并且应该用于绘制线条。

我的方法是这样的：

  var rects = svg.selectAll("rect")
    .data(data).enter()
    .append("rect")
    .attr("width")
    .attr('x', function(d) { return x(d.timeStart); })
    .attr('width', function(d) { return x(d.timeEnd) - x(d.timeStart); })
    .attr('y',foo) //doesnt matter
    .attr('height',bar);  //doesnt matter

 // Now I want to appen each rect its interval array as lines
 rects.selectAll("line")
    .data(...) // What to put here?
    .enter().append("line")
    .attr('x1', function(d) { return x(d.timeOne); }) // But I want also timeTwo, timeThre .., when they exist.
    ...

我知道群体（g），但我无法完成它。希望有人可以提供帮助。