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

例如，存在具有start,end和duration（以小时为单位）属性的对象数组。按日期分组的时间间隔（在d3.js中）

[{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 - 日期）：

enter image description here

我在想创造更多的对象，以填补空类似事件之间的空间

[{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功能呢？

来源

2013-06-22 evfwcqcg

听起来像你提出的格式将是非常合适的。 –

我会考虑改变数据格式

[{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-22 16:34:48 elsherbini

谢谢，这个例子非常有帮助！ – evfwcqcg

没问题。如果您对示例代码有任何疑问，或者想让您的代码按照您的要求做，我会很乐意提供帮助。 – elsherbini

糟糕，我发现我有一个错误。 'rect'的''''''属性应该设置为'function（d）{return d.start;}'而不是'd.end'。我更新了示例代码。 – elsherbini

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

回答

相关问题