在D3.js中取消缩放侦听器并恢复滚动能力
在D3.js中取消缩放侦听器并恢复滚动能力
提问于 2014-03-10 14:27:35
我现在在做D3.js。这是为我的svg标记注册缩放监听器的代码
var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom);
function zoom() {
vis.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
svg.call(zoomListener)现在，当我在svg元素上滚动鼠标时，它就被放大了。但是当我像这样解开缩放事件时
zoomListener.on("zoom", null);只有svg没有缩放，但是当鼠标在svg元素上时，我不能滚动页面。
如何解除缩放监听器并恢复鼠标的滚动能力？谢谢!
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-03-10 14:37:19
要完全禁用缩放行为，需要注销它在调用它的元素上安装的所有事件处理程序：
svg.on("mousedown.zoom", null);
svg.on("mousemove.zoom", null);
svg.on("dblclick.zoom", null);
svg.on("touchstart.zoom", null);
svg.on("wheel.zoom", null);
svg.on("mousewheel.zoom", null);
svg.on("MozMousePixelScroll.zoom", null);Stack Overflow用户
发布于 2015-07-15 23:59:45
根据https://github.com/mbostock/d3/wiki/Zoom-Behavior的说法，你需要做的就是
svg.on(".zoom", null);Stack Overflow用户
发布于 2016-10-10 21:06:46
我很欣赏Lars的解决方案，但是他和提问者都没有继续解释svg的定义，所以我在文章中给那些想要澄清一点的人写这篇文章。
我有一个在$("#my-graphing-div") (基于d3)中呈现的Rickshaw图形，我就是这样删除滚动事件的：
var svg = $("#my-graphing-div").children("svg");
d3.select(svg[0])
.on("mousedown.zoom", null)
.on("mousemove.zoom", null)
.on("dblclick.zoom", null)
.on("touchstart.zoom", null)
.on("wheel.zoom", null)
.on("mousewheel.zoom", null)
.on("MozMousePixelScroll.zoom", null);在使用d3.select之前使用on是为我修复它的关键。很棒的道具，这篇文章真的帮了我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22302919
复制相关文章
相似问题
腾讯云开发者
