I'm trying to create some custom zoom functionality in d3.js. Currently the zoom is triggered on a single click and zooms in to focus only on the area that was clicked on.

Currently my code has a function zoom(d) that does exactly what it needs to. There is also a var zoomTransition which resides inside zoom() and is responsible for much of the functionality. I'm unfortunately unable to share much of my code.

The zoom needs to also occur on a mouse scroll. The difficulty I'm having is that this:

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

disregards the scroll wheel direction. Zoom is called simply because the wheel is scrolled, either in or out.

Is there any way I can access the scroll direction and pass it into zoom()? Or a better way to do this?

I'm trying to create some custom zoom functionality in d3.js. Currently the zoom is triggered on a single click and zooms in to focus only on the area that was clicked on.

Currently my code has a function zoom(d) that does exactly what it needs to. There is also a var zoomTransition which resides inside zoom() and is responsible for much of the functionality. I'm unfortunately unable to share much of my code.

The zoom needs to also occur on a mouse scroll. The difficulty I'm having is that this:

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

disregards the scroll wheel direction. Zoom is called simply because the wheel is scrolled, either in or out.

Is there any way I can access the scroll direction and pass it into zoom()? Or a better way to do this?

• javascript
• d3.js
• scroll
• zooming

2 Answers 2

Was looking for this:

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

More so javascript than d3, but that's how you access the scroll wheel information.

d3 has a zoom behaviour that you might find useful.

Example code:

 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 + ")");
}

Full example:

http://bl.ocks/mbostock/2206340