The zoom.scaleBy() Function in D3.js is used to scale the current zoom transform of the selected elements by k. The reference point p does move.
Syntax:
zoom.scaleBy(selection, k[, p])
Parameters: This function accepts three parameters as mentioned above and described below:
- selection: This parameter can be selection or transition.
- k: This parameter is a scale factor, specified either as numbers or as functions
- p: The value of p is not specified, it defaults value is the center of the viewport extent.
Return Value: This function returns the zoom behavior.
Below programs illustrate the zoom.scaleBy() function in D3.js
Example 1:
HTML
<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">           <script src=     </script>           <style>         circle {           opacity: 0.7;         }         g.zoom-controls {             cursor: pointer;             pointer-events: all;         }         g.zoom-controls rect {             fill: white;             stroke: #596877;             stroke-width: 1;         }         g.zoom-controls line {             stroke: #596877;             stroke-width: 2;         }     </style> </head>     <body>     <center>         <h1 style="color: green;">             Geeksforneveropen         </h1>               <h3>             D3.js | zoom.scaleBy() Function         </h3>                   <svg>               <g class="zoom-controls" transform="translate(10, 10)">                   <g id="zoom-in" transform="translate(0, 0)">                       <rect width="30" height="30"></rect>                       <line x1="5" y1="15" x2="25" y2="15"></line>                       <line x1="15" y1="5" x2="15" y2="25"></line>                 </g>                   <g id="zoom-out" transform="translate(30, 0)">                       <rect width="30" height="30"></rect>                       <line x1="5" y1="15" x2="25" y2="15"></line>                   </g>               </g>           </svg>                   <script>             var radius = 10;             var svg = d3.select('svg');              var dimension = document.body.getBoundingClientRect();                           var data = d3.range(0, 25).map(function() {                 return {                 x: getRandom(radius, dimension.width - radius),                 y: getRandom(radius, dimension.height - radius)               }             });                           var zoom = d3.zoom()                 .on('zoom', function() {                 canvas.attr('transform', d3.event.transform);             });                           var canvas = svg                 .attr('width', dimension.width)                 .attr('height', dimension.height)                 .call(zoom)                 .insert('g', ':first-child');               canvas.selectAll('circle')                 .data(data)                 .enter()                 .append('circle')                 .attr('r', radius)                 .attr('cx', function(d) {                 return d.x;                 }).attr('cy', function(d) {                 return d.y;                 }).style('fill', function() {                 return d3.schemeCategory10[getRandom(0, 9)]                 });                           d3.select('#zoom-in').on('click', function() {                 // Smooth zooming                 zoom.scaleBy(svg.transition().duration(750), 1.3);             });                           d3.select('#zoom-out').on('click', function() {                 // Ordinal zooming                 zoom.scaleBy(svg, 1 / 1.3);             });                           function getRandom(min, max) {                 min = Math.ceil(min);                 max = Math.floor(max);                 return Math.floor(Math.random() * (max - min + 1)) + min;             }         </script>     </center> </body>   </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html> <head>     <meta charset="utf-8">           <script src=     </script>       </head>     <body>     <center>         <h1 style="color: green;">             Geeksforneveropen         </h1>               <h3>D3.js | zoom.scaleBy() Function</h3>                   <svg height="100px" width="100px"></svg>                   <script>             const zoom_action = () => g.attr("transform", d3.event.transform);               // Create the zoom handler             const zoom = d3.zoom()                     .on("zoom", zoom_action);                           // Get SVG element and apply zoom behaviour             var svg = d3               .select("svg")               .call(zoom);                           // Create Group that will be zoomed             var g = svg.append("g");                           // Create circle             g.append("circle")               .attr("cx",0)               .attr("cy",0)               .attr("r", 5)               .style("fill","green");                           // Use of zoom.scaleBy Function             zoom.scaleBy(svg, 5);             zoom.translateBy(svg, 50, 50);           </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!
