D3 或 Rickshaw 中的可缩放、Google-Finance 风格的时间序列图？ [关闭]答案

【问题标题】：Zoomable, Google-Finance-style time series graph in D3 or Rickshaw? [closed]D3 或 Rickshaw 中的可缩放、Google-Finance 风格的时间序列图？ [关闭]
【发布时间】：2012-08-09 14:12:00
【问题描述】：

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

我找到的最接近的例子是这张泳道图：

http://bl.ocks.org/1962173

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

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

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

【问题讨论】：

与其从头开始重新实现该功能，不如采用dygraphs 之类的现有解决方案并在其上添加“d3 兼容性”层，即允许您使用它的东西以类似 d3 的方式。
TechanJS 基于 d3。 github.com/andredumas/techan.js/wiki/Gallery 但我认为如果你只允许一个 d3 基础，你就是在人为地限制自己。
因此，由于“推荐或查找书籍、工具、软件库、教程或其他非现场资源”3 年，stackoverflow 上最受欢迎的可缩放财务图表问题被关闭为“离题”在被问到之后，尽管作者显然在寻找使用 D3 或 Rickshaw 的可缩放时间序列图表示例？

标签： javascript graph charts d3.js zooming

【解决方案1】：

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

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

【讨论】：

链接现在已损坏，我已经发布了an answer，它正是使用dygraphs 完成了OP 想要的。
链接仍然存在，但是他们从 nvd3.com 移动到 nvd3.org 并且没有设置重定向。在对资源进行此更改后，我还更新了答案。 - nvd3.org/ghpages/lineWithFocus.html
这里是 Mike Bostock 的一个不太相关但类似的画笔选择实现：bl.ocks.org/mbostock/6498000

【解决方案2】：

dygraphs 正是在这个演示中你想要的：

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

【讨论】：

【解决方案3】：

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

【讨论】：

请记住，它是为商业目的付费的：shop.highsoft.com/highstock.html
HighStock 不是使用 D3 编写的；-)

【解决方案4】：

我知道您打算使用 D3，但 Humble Finance 必须值得一提，因为它完全符合您的需求，只需要 javascript 和画布。

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

尝试 Humble Finance 的提示：zip 下载不包含它需要的 flotr2，但可以从 here 轻松下载（显然，您必须将所需的 flotr2 文件添加到右侧的 Humble Finance 目录地点）。

编辑：

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

谢谢，但出于各种原因，我真的在寻找基于 D3 的解决方案。

【解决方案7】：

人力车现在支持这个！

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

【讨论】：