score:5

Accepted answer

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

A:

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

B:

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.

score:1

You can achieve this by:

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

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