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

Question

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

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

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

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

应该是

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

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

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

score 1 · Accepted Answer

更改

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

到

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

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

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

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

1 回答 1