如何使用鼠标单击和拖动来放大 D3

How to use mouse click and drag to zoom in D3

本文关键字：放大 D3 拖动 何使用 鼠标 单击      更新时间：2023-09-26

我是 D3 的新手，想实现类似于此处所示的单击-拖动-缩放：http://www.highcharts.com/demo/line-time-series

我已经构建了一个折线图，但对如何实现这一点感到困惑。

我想我需要一些 JS 事件处理程序来查找我的鼠标按下和鼠标向上发生的位置。但是，如何创建用户拖动时图形上出现的底纹？

您可能希望在d3.js中使用brush来执行此操作。 你可以看到我在 http://bl.ocks.org/1962173 上整理的一个例子，它做了类似的事情。

相关代码为：

var brush = d3.svg.brush()
    .x(x)
    .extent([d3.time.monday(now),d3.time.saturday.ceil(now)])
    .on("brush", display);

其中display是根据当前brush范围重绘数据的函数。这样，您无需尝试挂接自己的处理程序，甚至根本不需要担心调整突出显示区域的大小。

相关文章：