如何使用鼠标单击并拖动以放大D3

Question

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

我已经有了一个我已经构建的折线图,但我对如何实现它感到困惑.

我想我需要一些JS事件处理程序来查找我的mousedown和mouseup发生的位置.但是,如何在用户拖动时创建图形上出现的阴影？

Answer 1

您可能需要使用 abrush在 中执行此操作d3.js。您可以看到我在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。这样您就不需要尝试挂钩自己的处理程序，甚至根本不需要担心调整突出显示区域的大小。