Данные временной шкалы кластеров в d3

Question

У меня есть график событий, которые я планирую. Каждое событие представлено кругом, радиус которого масштабируется до количества событий для заданной временной метки. Образец данных:

[ 
    { 
    date: <Date>, 
    count: 4 
    }, 
    { 
    date: <Date>, 
    count: 9 
    }, 
    { 
    date: <Date>, 
    count: 4 
    }, 
    { 
    date: <Date>, 
    count: 3 
    } 
] 

Пример шкалы времени выхода из данных выше

Обратите внимание, что два из кругов перекрываются. Это происходит даже при увеличении временной шкалы. Я хотел бы реализовать какую-то кластеризацию данных, чтобы круги, перекрывающиеся, были объединены в один круг, который суммирует количество событий и усредняет дату события. Таким образом, в приведенном выше примере у вас будет три круга с подсчетом 4, 13 и 3. Масштабирование на временной шкале в конечном итоге достигнет точки, в которой могут быть нарисованы все 4 круга, поэтому в этот момент ни одна из данных точки будут сгруппированы.

Одна из последних морщин, мне также хотелось бы, чтобы график реагировал на изменение размера браузера. Уменьшение размера браузера уменьшает пространство, доступное для временной шкалы, поэтому мне нужно собрать больше данных, чтобы оно соответствовало.

Любые предложения приветствуются.

Answer 1

Там есть динамическая ось на этой кисти, которая отзывчивый размера экрана:

http://bl.ocks.org/emeeks/raw/c478e0aac6373a6a4ec8/

Это конкретизируется с помощью d3.time.scale и d3.svg.axis. Здесь слишком много кода, но важно отметить, что d3.time.format используется для значений тика. Вы можете использовать d3.time.format в качестве параметра вложения для вашей кластеризации и изменить формат в соответствии с детализацией ваших данных.

Так что, если у вас было пять событий:

var events = [{"label": "event 1", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)"}, 
       {"label": "event 2", "timestamp": " Tue Dec 24 2013 7:47 GMT-0800 (PST)"}, 
       {"label": "event 3", "timestamp": " Tue Dec 24 2013 7:47 GMT-0800 (PST)"}, 
       {"label": "event 4", "timestamp": " Fri Dec 25 2013 7:47 GMT-0800 (PST)"}, 
       {"label": "event 5", "timestamp": " Wed Jan 1 2014 7:47 GMT-0800 (PST)"}] 

Вы можете установить d3.time.format агрегировать в день или час или месяц, или любое время приращения. Здесь мы будем просто делать дата:

var f = d3.time.format('%d') 

И вы можете использовать его в качестве гнездового параметра в d3.nest():

var nest = d3.nest() 
.key(function(d) {return f(new Date(d.timestamp))}) 
.entries(events) 

Содержимое гнезда являются:

[ 
{"key":"23","values":[ 
    {"label":"event 1","timestamp":" Mon Dec 23 2013 7:47 GMT-0800 (PST)"}] 
}, 
{"key":"24","values":[ 
    {"label":"event 2","timestamp":" Tue Dec 24 2013 7:47 GMT-0800 (PST)"}, 
    {"label":"event 3","timestamp":" Tue Dec 24 2013 7:47 GMT-0800 (PST)"}] 
}, 
{"key":"25","values":[ 
    {"label":"event 4","timestamp":" Fri Dec 25 2013 7:47 GMT-0800 (PST)"}] 
}, 
{"key":"01","values":[ 
    {"label":"event 5","timestamp":" Wed Jan 1 2014 7:47 GMT-0800 (PST)"}] 
} 
] 

В этом случае размер вашего круга может быть основан на значения.length (с указанием количества событий, сгруппированных в этот период времени), и ваша позиция и форматтер могут динамически регулироваться на основе масштаба и размера экрана.