The zoom.scaleTo() function in D3.js is used to scale the current zoon transform of the selected elements to k.
Syntax:
zoom.scaleTo(selection, k[, p])
Parameters: This function accept two parameter 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
Return Value: This function returns the zoom behavior.
Below programs illustrate the zoom.scaleTo() function in D3.js
Example 1:
HTML
<!DOCTYPE html> <html> <head>     <meta charset="utf-8">           </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.scaleTo() 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.scaleTo(svg.transition().duration(750), 1.3);             });                           d3.select('#zoom-out').on('click', function() {               // Ordinal zooming               zoom.scaleTo(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>       </head>     <body>     <center>         <h1 style="color: green;">             Geeksforneveropen         </h1>               <h3>D3.js | zoom.scaleTo() 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.scaleTo Function         zoom.scaleTo(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!
