0

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

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

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

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

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

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

应该是

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

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

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

4

1 回答 1

1

更改

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

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

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

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

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

于 2012-08-14T15:28:57.730 回答