D3.js：调整缩放示例以使用折线图？答案

【问题标题】：D3.js: Adapting zoom example to work with line graph?D3.js：调整缩放示例以使用折线图？
【发布时间】：2012-08-14 12:03:38
【问题描述】：

我正在尝试调整“缩放”示例in the D3.js repo 以使用折线图。可以在此处找到原始的工作缩放示例 - 只需在较小的图形中选择一个区域即可放大较大的图形：

不错！我的折线图改编（从also ships with D3 的“线”示例工作）在这里，但它不是很有效。如您所见，当您单击较小的图形时，较大图形上的 x 轴会正确缩放，但线条不会：

我认为问题出在 line.html 源代码中：

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

应该是这样的

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

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

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

【问题讨论】：

【解决方案1】：

改变

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

到

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

你会看到线路更新。这只是需要做的一部分——如您所见，点没有更新，线也没有正确剪裁。

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

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

【讨论】：