D3.js:调整缩放示例以使用折线图

Question

我正在尝试调整 D3.js 存储库中的"缩放"示例以使用折线图。原始的工作缩放示例可以在这里找到 - 只需在较小的图形中选择一个区域即可放大较大的图形：

http://nestoria.darkgreener.com/zoom.html

好！我的折线图改编（从 D3 附带的"折线"示例工作）在这里，但它并不完全有效。如您所见，当您单击较小的图形时，较大图形上的 x 轴会正确缩放，但线条不会：

http://nestoria.darkgreener.com/line.html

我认为问题出在这里.html来源：

focus.select("path").attr("d", area);

可能应该是

focus.select("path").attr("d", line);

但这无济于事。基本上，我不完全是来自context的修订数据实际上如何更新focus中的行。请谁解释一下我做错了什么？

我在这里创建了一个jsfiddle以使其更容易：http://jsfiddle.net/MYWRS/4/

Answer 1

更改

focus.select("path").attr("d", area);

自

focus.selectAll("path").attr("d", line);

您将看到行更新。这只是需要完成的部分工作 - 如您所见，点未更新，线未正确裁剪。

我的建议是重构您当前拥有的内容，并将创建线和点的调用包装在一个函数中，该函数将要显示的范围显示为参数。使用当前代码，正确的功能将更难实现，因为绘制线条的代码实际上并没有显式获取数据或范围。

您可能还想查看dygraphs，它可能已经提供了您想要的所有功能。