按日期分組的時間間隔（在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中）

回答

相關問題