Accepted answer

For D3 4.0, there're two ways to prevent d3 zoom from responding to wheel event.


zoom.filter(function() { return !event.button && event.type !== 'wheel'; })
// the `!event.button` expression is from the default filter, according to
// doc for zoom.filter([filter])


svg.on("wheel.zoom", null);
// according to doc for zoom(selection): Internally, the zoom behavior        
// uses selection.on to bind the necessary event listeners for zooming. 
// The listeners use the name .zoom

It's still possible to pan(translate) with mouse dragging.


You can achieve this by:

var svg ="body").select("svg")
    .attr("width", width)
    .attr("height", height)
   //.call(zoom) //remove the zoom listener from the group.

Next attach doublclick listener on the circle and the rectangle for zooming.

d3.selectAll("rect").on('dblclick', zoomClick)
d3.selectAll("circle").on('dblclick', zoomClick)

working code here

Related Query

More Query from same tag