Raul M Raul M - 1 month ago 21
HTML Question

d3 zoom with button and double click but don't zoom with with scroll wheel

I am using this example as a basis for zoom in my project but I would like to restrict the zoom to only the buttons and double clicking. Ideally, using the scroll wheel should just continue scrolling down the page and not zoom in on the svg when the mouse is over it. Any help is appreciated!

Answer

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

Comments