1

例如，有一个具有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 功能呢？

4

1 回答 1

3

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

    [{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，它没有考虑到你需要包装从一天开始并在第二天结束的事件。这只是在同一列中显示所有事件，空白代表空闲时间。

于 2013-06-22T16:34:48.103 回答