按日期分组时间间隔（在d3.js中）

Question

例如，有一组具有start，end和duration（小时）属性的对象。

[{start: new Date(2013, 2, 4, 0),
  end:   new Date(2013, 2, 4, 8),
  duration: 8},
 {start: new Date(2013, 2, 4, 22),
  end:   new Date(2013, 2, 5, 2),
  duration: 4},
 {start: new Date(2013, 2, 5, 5),
  end:   new Date(2013, 2, 7, 5),
  duration: 48}]

我想将它们想象成以下内容（y - 小时，x - 日期）：

我正在考虑创建其他对象来填充像

这样的事件之间的空白区域

[{start: new Date(2013, 2, 4, 0),
  end:   new Date(2013, 2, 4, 8),
  status: "busy"},

 {start: new Date(2013, 2, 4, 8, 0, 1),
  end:   new Date(2013, 2, 4, 21, 59, 59),
  status: "free"},

 {start: new Date(2013, 2, 4, 22),
  end:   new Date(2013, 2, 4, 23, 59, 59),
  status: "busy"},

 {start: new Date(2013, 2, 5, 0),
  end:   new Date(2013, 2, 5, 2),
  status: "busy"}]

然后将其映射到Stack Layout。

所以我的问题是，如何更好地分割和分组数组，以使这种可视化更容易？也许有一些内置的D3.js功能呢？

Answer 1

我会考虑将数据格式更改为

    [{start: new Date(2013, 2, 4, 0),
      end:   new Date(2013, 2, 4, 8)},
     {start: new Date(2013, 2, 4, 22),
      end:   new Date(2013, 2, 5, 2)},
     {start: new Date(2013, 2, 5, 5),
      end:   new Date(2013, 2, 7, 5)}]

由于您有开始日期和结束日期，因此您不需要持续时间。或者，你可以只有开始日期和持续时间。

我对stacklayout并不是非常熟悉，但是对于这个项目来说，只需将rect元素附加到正确的位置就足够了（而且更容易）。我在这里做了一个例子：http://tributary.io/inlet/5841372没有考虑到你需要包装从一天开始到下一天结束的事件的事实。这只显示同一列中的所有事件，空格表示空闲时间。