所以我能够实现mbostock的Zoomable Area chart。问题是,我意识到(duh)数据在缩放时没有变化,只有图像变化。我希望能够放大数据,而不是图像。
以下是我的数据集的一些细节。当我向我的数据服务器发送“get_table”请求时,我会收到数据,我需要告诉它切片数据和在什么范围内切割的程度。像这样:
"slice": hours
"from": 1371760800
"to":1380575880
然后我收到一堆JSON,然后重新格式化,看起来像这样:
{ "time": 1371760800, "value" : 14 },
{ "time": 1371764400, "value" : 3 },
{ "time": 1371768000, "value" : 14 },
等等,每小时一次(3600秒)。
对于它的价值,我只是得到数字。我添加了文字,可以随心所欲。
此时我想我有两个问题:
由于我需要挤出大约1,000个像素(屏幕宽度)的数据点超过几千个,我应该使用d3.layout.histogram吗?我一直在试验这个,并且很难理解我将如何保持时间感。也就是说,理想情况下,数据将被分箱 - 并且值总和 - 然而需要许多箱以适应宽度。 Y轴显示“值”,X轴显示时间段。然后,当用户滚动到图表中时,它将被重新分类为越来越小的单位。这导致我:
如果用户放大得足够深,我需要从我的数据服务器请求更精细的数据,切成几分钟。我该怎么做呢?我想我需要在缩放功能中发送请求。也许我需要感觉到他们已经接近并在他们需要之前请求数据,以便没有UI滞后但我总是可以设置一些“检索更多数据”的微调器等。
非常感谢您提供任何帮助。回到我的控制台!
更新1
(更好地解释问题。)
我可能有多达100,000个数据点,全部如上例所示:
{ "time": 1371760800, "value" : 14 }
假设水平容量约为1000 px宽,条形宽度为4 px,条形间距为1 px,我可以在图表中获得200条。这意味着如果我们显示所有数据,每个条形代表大约500个数据点(假设为线性时标)。
如果我们放大并且现在1000像素显示一半数据,那么我们每条显示250个数据点。当然,如果我们放大了,我们可以显示每条1个数据点,甚至可以增加条形尺寸。
抽象地说,我认为我需要的是直方图。我觉得在d3的函数式编程范例中必须要有一种方法来计算“值”,但是在“时间”上计算。我试着玩d3.layout.histogram.bins,虽然我可以把“价值”放在心里,但我似乎无法兼顾“时间”和“价值”。分箱功能必须将值的阈值返回到bin - 我喜欢阈值以查看“时间”值但累积“值”。