31

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

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

http://bl.ocks.org/1962173

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

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

理想情况下，我想使用Rickshaw，但 Rickshaw 示例似乎只有一个范围滑块。所以一个人力车的例子会更好。

4

7 回答 7

34

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

NVD3.js 带取景器的折线图

更新： NVD3 示例现在还链接到Mike Bostock（D3 的创建者）的示例，该示例演示了类似的功能，即缩放/聚焦于数据选择的能力，完全使用 D3.js 实现。

D3.js Focus+Context 通过刷机

于 2012-08-16T16:16:37.687 回答
14

dygraphs完全符合您在此演示中的要求：

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

在此处输入图像描述

于 2013-04-22T02:44:50.887 回答
6

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

在此处输入图像描述

于 2013-09-10T17:43:12.633 回答
4

我知道您打算使用 D3，但Humble Finance值得一提，因为它只使用 javascript 和画布就可以满足您的需求。

如果您真的打算使用 D3，我想您将不得不创建自己的东西，考虑到谦虚的金融是多么的好和合适，这必须是浪费时间。

尝试 Humble Finance 的提示：zip 下载不包含它所需的 flotr2，但可以从此处轻松下载（显然，您必须将所需的 flotr2 文件添加到 Humble Finance 目录的正确位置）。

编辑：

忽略 Humble Finance，我尝试了很多次使用它，它让我走弯路。代码库似乎很混乱，您最终不得不在页面中添加许多库才能使其正常工作，因此即使对图表进行微小的更改也非常困难。我现在正在使用 D3，但我发现它的 SVG 渲染速度太慢，曲线上有很多（很多很多）点。我最终使用 D3 来绘制轴、设置比例并渲染时间帧变化的东西，并使用画布绘制曲线。这似乎工作得很好。抱歉，我没有任何可见的示例。

于 2012-12-09T19:06:04.667 回答
3

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

于 2012-08-14T14:20:42.100 回答
0

人力车现在支持这个！

参见示例和Rickshaw.Graph.RangeSlider.Preview。

于 2014-07-19T09:54:55.587 回答
0

我对您提到的任何一个框架都不熟悉，但想知道您是否可以选择使用谷歌图表？使用它，您将能够了解他们在谷歌金融中所做的事情，并且可以从他们的网站上获取如何做到这一点的示例。

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

于 2012-08-13T10:55:49.087 回答