如何在d3的数据功能中使用数组中的数组

Question

我想使用d3中的x1，y1，x2，y2坐标在屏幕上创建矩形。我的数据结构如下，

[
  {
    "tname":abc,
    "thours":200,
    "x1":10,
    "y1":10,
    "x2":10,
    "y2":10,
    "ttask":[
      {
        "pname":one,
        "phours":200,
        "pteam":abc,
        "px1":10,
        "py1":10,
        "px2":10,
        "py2":10
      },
      {
        "pname":two,
        "phours":200,
        "pteam":abc,
        "px1":10,
        "py1":10,
        "px2":10,
        "py2":10
      }
    ]
  },
  {
    "tname":xyz,
    "thours":200,
    "x1":10,
    "y1":10,
    "x2":10,
    "y2":10,
    "ttask":[
      {
        "pname":one,
        "phours":200,
        "pteam":xyz,
        "px1":10,
        "py1":10,
        "px2":10,
        "py2":10
      },
      {
        "pname":two,
        "phours":200,
        "pteam":xyz,
        "px1":10,
        "py1":10,
        "px2":10,
        "py2":10
      } 
    ]
  }
]

在上述数据中，我想使用px1，px2，py1，py2创建矩形。

我尝试了使用数据功能的多种组合，但我无法实现

    var group = svg.selectAll('g')
         .data(teams);
    var rect = group.selectAll("rect")
        .data(function(d,i){
            return d.ttask;
        });

这是我的最后尝试。我不确定数据功能如何处理我的输入。

请帮助我了解如何使用数据函数为每个ttask数组元素绘制矩形。