The zoom.wheelDelta() function of D3.js is used to set the wheel delta function to the specified function and returns the zoom behaviour.
Syntax:
zoom.wheelDelta([delta])
Parameters: This function accepts a single parameter as mentioned above and described below.
- delta: This parameter is used to set the wheel delta function to the specified function.
Return Value: This function returns the zoom behaviour.
Below programs illustrate the zoom.wheelDelta() function in D3.js
Example 1:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </script> <style> svg text { fill: green; font: 20px sans-serif; text-anchor: center; } rect { pointer-events: all; } </style> </head> <body> <center> <h1 style="color: green;"> Geeksforneveropen </h1> <h3>D3.js | zoom.wheelDelta() Function</h3> <svg></svg> <script> var width = 400; var height = 200; var svg = d3.select("svg") .attr("width",width) .attr("height",height); // The scale used to display the axis. var scale = d3.scaleLinear() .range([10,width-20]) .domain([0,100]); var shadowScale = scale.copy(); var axis = d3.axisBottom() .scale(scale); var g = svg.append("g") .attr("transform","translate(0,50)") .call(axis); // Standard zoom behavior: var zoom = d3.zoom() .scaleExtent([1,10]) .translateExtent([[0, 0], [width, height]]) .wheelDelta(myDelta) .on("zoom", zoomed); // Call the Zoom. var rect = svg.append("rect") .attr("width",width) .attr("height",height) .attr("fill","none") .call(zoom); function zoomed() { var t = d3.event.transform; scale.domain(t.rescaleX(shadowScale).domain()); g.call(axis); } function myDelta() { return -d3.event.deltaY * (d3.event.deltaMode ? 120 : 1) / 1500; } </script> </center> </body> </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </script> <style> rect { fill: green; opacity: 0.5; stroke: black; stroke-width: 1px; } svg { border: 1px solid; font: 13px sans-serif; } </style> </head> <body> <center> <h1 style="color: green;"> Geeksforneveropen </h1> <h3>D3.js | zoom.wheelDelta() Function</h3> <div id="GFG"> </div> <script> var width = 400; var height=250; var size=30; var svg = d3.select('#GFG') .append('svg') .attr('width', width) .attr('height', height) var g = svg.append('g') var numrects = 100; var rects = []; for (var i = 0; i < numrects; i++) rects.push({'x': 1 + Math.floor(Math.random() * width), 'y': 1+Math.floor(Math.random() * height), 'h': 3+Math.floor(Math.random() * size), 'w': 3+Math.floor(Math.random() * size) }); g.selectAll('rect') .data(rects) .enter() .append('rect') .attr('x', function(d) { return d.x; }) .attr('y', function(d) { return d.y; }) .attr('height', function(d) { return d.h; }) .attr('width', function(d) { return d.w; }) .classed('no-zoom', true) var zoomed = d3.zoom() .wheelDelta(myDelta) .scaleExtent([1,10]) .on('zoom', function(d){ g.attr('transform', d3.event.transform); }); svg.call(zoomed); function myDelta() { return d3.event.deltaY / 10; } </script> </center> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
