javascript - D3 或 Rickshaw 中的可缩放、Google 财经风格的时间序列图?

标签 javascript graph charts d3.js zooming

<分区>

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

我找到的最接近的例子是这个泳道图:

http://bl.ocks.org/1962173

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

注意:我绝对想要一个顶部带有可调整大小画笔的小型图表,而不是一个纯粹可拖动/可缩放的 x 轴,例如 this example .

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

最佳答案

NVD3 是一个非常酷的项目,它有许多基于 D3 编写的可重复使用的图表。参见 here带有取景器的折线图示例以及源代码。

NVD3.js Line Chart with View Finder

更新:NVD3 示例现在也链接到 example Mike Bostock(D3 的创建者)的模型,它展示了类似的功能,即缩放/聚焦数据选择的能力,完全使用 D3.js 实现。

D3.js Focus+Context via Brushing

关于javascript - D3 或 Rickshaw 中的可缩放、Google 财经风格的时间序列图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11932767/

相关文章:

javascript - 当我想使用外部 "_this is undefined"关键字时出现 "this"错误

javascript - 使用 box2dweb 绘制 Sprite 动画

python - NetworkX:如何将节点坐标分配为属性?

php - 使用 2 个不同的数据在图表 laravel 中显示

java - 更改图表底部的系列颜色指示器

javascript - 在javascript中将toDate设置为非必填字段

javascript - XmlHttpObject 不改变它的 readyState

algorithm - 空间数据结构中的不同搜索方法

database - 使用关系数据库表示图形

javascript - 支持双指缩放的 HTML5 图表库