javascript - 如何使用鼠标单击和拖动来放大 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);

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