Unregister zoom listener and restore scroll ability in D3.js

Question

I'm currently working D3.js. This is the code to register zoom listener for my svg tag

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)

Now when I scroll the mouse on the svg element, it is zoomed. But when I unbind the zoom event like this

zoomListener.on("zoom", null);

only the svg is not zoomed but I cannot scroll the page while the mouse is over the svg element.

How to unbind the zoom listener and restore the scroll ability for the mouse? thanks!

Answer 1

To completely disable the zoom behaviour, you need to unregister all event handlers that it has installed on the element you've called it on:

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);