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被用于tick值。您可以使用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)"}] 
} 
] 

在这种情况下，您的圆圈大小可以基于values.length（表示在该时间段聚集的事件的数量），并且您的位置和格式化程序可以根据缩放和屏幕大小动态调整。