D3.js 如何知道用户是否正在缩放,以及使用d3行为缩放的方向?
我正在开发一个使用d3绘制图表的应用程序。x轴是时间刻度。用户可以放大/缩小以扩展或收缩x轴。现在,我想根据用户缩放的方向在事件处理程序中添加一些逻辑。但我并没有找到一个简单的方法来知道用户是否正在进行缩放以及缩放方向 有人能在这里分享一些经验吗?你想 要在缩放更改时运行函数,可以按如下方式添加缩放事件处理程序:D3.js 如何知道用户是否正在缩放,以及使用d3行为缩放的方向?,d3.js,zooming,D3.js,Zooming,我正在开发一个使用d3绘制图表的应用程序。x轴是时间刻度。用户可以放大/缩小以扩展或收缩x轴。现在,我想根据用户缩放的方向在事件处理程序中添加一些逻辑。但我并没有找到一个简单的方法来知道用户是否正在进行缩放以及缩放方向 有人能在这里分享一些经验吗?你想 要在缩放更改时运行函数,可以按如下方式添加缩放事件处理程序: zoom.on("zoom", function () { var scale = d3.event.scale; var translate = d3.event.t
zoom.on("zoom", function () {
var scale = d3.event.scale;
var translate = d3.event.translate;
// Do your processing
});
如果您想告诉缩放方向,可以每次保存
翻译
,并将当前的缩放方向与前一个进行比较。缩放方向:放大或缩小
在d3的第4版中,ZoomEvent
包含wheeleevent
作为sourceEvent
属性。因此,要有我正在做的方向:
zoom.on("zoom", () => {
-1 * Math.sign(d3.event.sourceEvent.deltaY)
});
d3.event.sourceEvent.deltaY
在放大时给出了数值,对我来说,缩小时使用负值,这就是为什么我要乘以-1
d3.event.deltaY
的值仅在缩放的wheelDelta
方法中有效(参见下面的代码),但当我在zoom
的处理程序中调用它时,它在v3中给出mes值
d3
.zoom()
.wheelDelta((ev, i, g) => {
return -d3.event.deltaY * (d3.event.deltaMode ? 120 : 1) / 500;
})
.on('zoom', () => {
// ...
});