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!
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