D3鼠标滚轮缩放方向

D3 mousewheel zoom direction

本文关键字：缩放 方向 鼠标 D3      更新时间：2023-09-26

我正在尝试在d3.js中创建一些自定义缩放功能。目前，缩放是在单击时触发的，并且会放大到只关注单击的区域。

目前，我的代码有一个function zoom(d)，它可以做它需要做的事情。还有一个位于zoom（）内部的var zoomTransition，它负责大部分功能。不幸的是，我无法共享我的大部分代码。

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

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

忽略滚轮方向。Zoom之所以被调用，仅仅是因为滚轮被滚动（向内或向外）。

有什么方法可以访问滚动方向并将其传递到zoom（）中吗？或者更好的方法？

正在寻找这个：

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

javascript比d3更重要，但这就是访问滚轮信息的方式。

d3具有缩放行为，您可能会发现它很有用。

示例代码：

 var zoom = d3.behavior.zoom()
        .scaleExtent([0, 10])
        .on("zoom", redraw); //if you are sure that your zoom function is working just replace redraw with your zoom function

function redraw() {
    return svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}

完整示例：

http://bl.ocks.org/mbostock/2206340

相关文章：