D3或人力车中的Zoomable，Google-Finance风格的时间序列图？

Question

我想在D3中创建一个时间序列折线图，下面的图表的较小版本允许用户放大图表的某些部分，如a Google Finance graph。

我发现的最接近的例子是这个泳道图：

http://bl.ocks.org/1962173

有没有人在D3中使用折线图进行此操作的任何示例？

注意：我绝对想要一个小版本的图形，顶部有一个可调整大小的画笔，而不是像this example那样纯粹可拖动/可缩放的x轴。

理想情况下，我想使用Rickshaw，但使用人力车示例only seem to have a range slider。所以人力车的例子会更好。

Answer 1

NVD3 是一个非常酷的项目，在D3上写了许多可重复使用的图表。有关带有取景器的折线图示例以及源代码，请参阅here。

更新： NVD3示例现在还链接到Mike Bostock的example（D3的创建者），它展示了类似的功能，能够缩放/专注于选择的数据，完全用D3.js实现。

Answer 2

dygraphs在本演示中完全你想要的东西：

http://dygraphs.com/gallery/#g/range-selector

Answer 3

怎么样HighStock，HighCharts鲜为人知的兄弟姐妹？

Answer 4

我可能有点迟到了，但博斯托克先生最近提供了an excellent example你正在寻找的东西。

Answer 5

我知道你打算使用D3，但是Humble Finance值得一提，因为它只需要javascript和画布就可以了。

如果你真的打算使用D3，我想你必须创造属于你自己的东西，这是浪费时间，因为有多么优秀和合适的廉价融资。

尝试Humble Finance的提示：zip下载不包含它所需的flotr2，但是可以从here轻松下载（显然你必须将所需的flotr2文件添加到Humble Finance目录中）正确的地方）。

修改

忽略Humble Finance，我尝试过使用它，它开车绕过弯道。代码库似乎非常混乱，你不得不最终添加到你的页面很多库以使其工作，然后很难对图表进行微小的改动。我现在正在使用D3，但我发现它的SVG渲染得太慢，曲线上有很多（很多很多）点。我最终使用D3绘制轴，设置比例并渲染时间帧变化的东西，并使用画布绘制曲线。这似乎工作得很好。对不起，我没有任何可见的示例。

Answer 6

你见过Crossfilter吗？另一种基于D3的产品，具有与Google财经界面相似的属性。

Answer 7

我不熟悉您提到的任何一个框架，但想知道您是否可以选择使用google charts？使用此功能，您将能够在Google财经中执行相关操作，并且可以从他们的网站获取有关如何操作的示例。

如果您正在寻找其他框架，我可以推荐Emprise Charts - 我非常确定您能够在那里做类似的事情并且他们的开发团队非常有帮助。

Answer 8

人力车现在支持这个！

请参阅example和Rickshaw.Graph.RangeSlider.Preview。

Answer 9

所以我找到的最佳答案是the D3 repo itself中的/examples/zoom/zoom.html文件。不是折线图，但很容易适应。