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!
