Групповые интервалы времени по дате (в 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, который не учитывает тот факт, что вам нужно обернуть события, которые начинаются один день и заканчиваются следующим. Это просто отображает все события в том же столбце, с пробелом, представляющим свободное время.