Javascript D3 或人力车中的可缩放、谷歌金融风格的时间序列图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11932767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Zoomable, Google-Finance-style time series graph in D3 or Rickshaw?
提问by Richard
I want to create a time series line graph in D3, with a smaller version of the graph below that allows the user to zoom in on certain sections of the chart, like a Google Finance graph.
我想在 D3 中创建一个时间序列折线图，下面是一个较小版本的图表，允许用户放大图表的某些部分，例如Google Finance graph。
The closest example I've found is this swimlane chart:
我发现的最接近的例子是这个泳道图：
Does anyone have any examples of doing this with a line graph in D3?
有没有人有任何使用 D3 中的折线图执行此操作的示例？
NB: I definitely want a small version of the graph with a resizeable brush on top, not a purely draggable/zoomable x-axis, like this example.
注意：我绝对想要一个小版本的图表，顶部有一个可调整大小的画笔，而不是一个纯粹的可拖动/可缩放的 x 轴，就像这个例子。
Ideally, I'd like to use Rickshaw, but the Rickshaw examples only seem to have a range slider. So a Rickshaw example would be even better.
理想情况下，我想使用Rickshaw，但 Rickshaw 示例似乎只有一个范围滑块。所以人力车的例子会更好。
回答by GordyD
NVD3is a very cool project that has a number of reusable chartswritten upon D3. See herefor an example of a line chart with a view finder, along with source code.
NVD3是一个非常酷的项目，它在 D3上编写了许多可重复使用的图表。有关带有取景器的折线图示例以及源代码，请参见此处。
Update:The NVD3 example now also links to an exampleof Mike Bostock's (creator of D3) which demonstrates similar functionality, the ability to zoom/focus on a selection of the data, implemented purely with D3.js.
更新：NVD3 示例现在还链接到Mike Bostock（D3 的创建者）的示例，该示例演示了类似的功能，即缩放/聚焦数据选择的能力，完全使用 D3.js 实现。
回答by Dan Dascalescu
dygraphs does exactlywhat you want in this demo:
dygraphs完全符合您在此演示中的要求：
http://dygraphs.com/gallery/#g/range-selector
http://dygraphs.com/gallery/#g/range-selector
回答by dardenfall
回答by SColvin
I know you're intent on using D3, but Humble Financehas to be worth a mention as it does exactly what you want with just javascript and canvases.
我知道您打算使用 D3，但Humble Finance值得一提，因为它仅使用 javascript 和画布就可以完全满足您的需求。
If you're really intent on using D3, I guess you will have to create something of your own which has to be a waste of time given how good and suitable humble finance is.
如果您真的打算使用 D3，我想您将不得不创建自己的东西，考虑到不起眼的财务是多么好的和合适的，这肯定是在浪费时间。
Tip for trying Humble Finance: the zip download doesn't include flotr2 which it requires, however it can easily be download from here(obviously you then have to add the required flotr2 files to the Humble Finance directory in the right place).
尝试 Humble Finance 的提示：zip 下载不包含它所需的 flotr2，但是可以从这里轻松下载（显然，您必须将所需的 flotr2 文件添加到 Humble Finance 目录的正确位置）。
Edit:
编辑：
Ignore Humble Finance, I tried using it a lot and it drove me round the bend. The code base seemed to be quite messy and you had to end up added far to many libraries to your page to get it to work, it's then very hard to make even minor alterations to the chart. I'm now using D3, but i found it's SVG rendered too slowly with lots (lots and lots) of points on the curve. I ended up using D3 to draw the axes, setup the scales and render the timeframe changing thing, and drawing the curve using a canvas. That seems to work pretty well. Sorry i don't have the example anywhere viewable.
忽略 Humble Finance，我尝试过很多次使用它，它驱使我绕过弯道。代码库似乎很混乱，您最终必须向页面中添加许多库才能使其正常工作，因此即使对图表进行微小的更改也非常困难。我现在正在使用 D3，但我发现它的 SVG 渲染速度太慢，曲线上有很多（很多很多）点。我最终使用 D3 来绘制轴，设置比例并渲染时间范围变化的东西，并使用画布绘制曲线。这似乎工作得很好。抱歉，我在任何地方都找不到示例。
回答by rowanu
Have you seen Crossfilter? Another offering based on D3, which has similar properties to Google Finance's interface.
你见过交叉过滤器吗？另一个基于 D3 的产品，它具有与 Google Finance 界面类似的属性。
回答by Brian Low
回答by James
I'm not familiar with either of the frameworks you mention but wondered if it was an option for you to use google chartsinstead? Using this you would be able to what they do in google finance and the example for how to do it could be taken from their website.
我不熟悉您提到的任何一个框架，但想知道您是否可以选择使用谷歌图表？使用它，您将能够了解他们在谷歌金融中所做的事情，并且可以从他们的网站上获取如何做的示例。
If you're looking for other frameworks to look into I can recommend Emprise Charts - I'm pretty sure you would be able to do something similar there and their development team are very helpful.
如果您正在寻找其他框架来研究，我可以推荐 Emprise Charts - 我很确定您可以在那里做类似的事情，他们的开发团队非常有帮助。
