How to Prevent Default action of Mousewheel event

Question

I'm working on building a d3.js bar chart that will allow me to scroll on the x axis by wrapping an svg element with fixed width and heigh inside of smaller div with overflow properties. This visualization is being built on a platform that handles the data and provides a javascript code editor to create the visualization. Once you publish the code, the bar chart renders in an html div element.

The page where the bar chart gets rendered has a default zoom event that fires when you use the mousewheel. Since I would like to scroll in my bar chart by using the mousewheel, I'm trying to stop the default zoom action from firing by included the following statement in the code:

$(vizhtmlelement).mousewheel(function() {
    return false;
});

This works successfully at removing the zoom functionality, but it also prevents the scrolling with the mousewheel from working. Is there a way I can stop the mousewheel zoom from happening while keeping the mousewheel scroll in my visualization?

Answer 1

On whatever element you .call() your zoom function, you need to set its mousewheel behavior to null. So if you .call(zoom) from a or with the id of "yourElement" then it would look like this:

d3.select("#yourElement")
.call(myZoom)
.on("dblclick.zoom", null)
.on("mousewheel.zoom", null)
.on("DOMMouseScroll.zoom",null);

Notice I also disabled the double-click zoom, because you'll probably want that disabled as well.