D3鼠标滚轮缩放方向 [英] D3 mousewheel zoom direction

问题描述

我正在尝试在d3.js中创建一些自定义缩放功能.当前，缩放是在单击时触发的，并且放大以仅聚焦于被单击的区域.

I'm trying to create some custom zoom functionality in d3.js. Currently the zoom is triggered on a single click and zooms in to focus only on the area that was clicked on.

目前，我的代码中有一个function zoom(d)可以完全满足其需要.还有一个var zoomTransition驻留在zoom()内，负责许多功能.不幸的是，我无法共享很多代码.

Currently my code has a function zoom(d) that does exactly what it needs to. There is also a var zoomTransition which resides inside zoom() and is responsible for much of the functionality. I'm unfortunately unable to share much of my code.

还需要在鼠标滚动上进行缩放.我遇到的困难是:

The zoom needs to also occur on a mouse scroll. The difficulty I'm having is that this:

        .on("wheel", function(d){
            zoom(d);
        });

忽略滚轮方向.缩放之所以被称为仅仅是因为滚轮可以滚动进出.

disregards the scroll wheel direction. Zoom is called simply because the wheel is scrolled, either in or out.

有什么方法可以访问滚动方向并将其传递给zoom()?或更好的方法来做到这一点?

Is there any way I can access the scroll direction and pass it into zoom()? Or a better way to do this?

推荐答案

正在寻找:

.on("wheel", function(d){
            var direction = d3.event.wheelDelta < 0 ? 'down' : 'up';
            zoom(direction === 'up' ? d : d.parent);
        });

比d3具有更多的javascript，但这是您访问滚轮信息的方式.

More so javascript than d3, but that's how you access the scroll wheel information.

这篇关于D3鼠标滚轮缩放方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！