D3鼠标滚轮缩放方向答案

【问题标题】：D3 mousewheel zoom directionD3鼠标滚轮缩放方向
【发布时间】：2016-07-21 00:50:23
【问题描述】：

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

目前我的代码有一个function zoom(d)，它完全可以满足它的需要。还有一个var zoomTransition，它位于 zoom() 内部，负责大部分功能。很遗憾，我无法分享我的大部分代码。

缩放也需要发生在鼠标滚动上。我遇到的困难是：

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

忽略滚轮方向。之所以调用缩放，是因为滚轮滚动，无论是向内还是向外。

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

【问题讨论】：

标签： javascript d3.js scroll zooming

【解决方案1】：

正在寻找这个：

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

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

【讨论】：

只是一个快速的通知：d3.event 被移动了（所以现在的功能是function(event,d) ....谢谢你强硬！

【解决方案2】：

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

【讨论】：