D3.js zoom.scaleTo() Function

0 0 2 minutes read

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 src="https://d3js.org/d3.v4.min.js">  
    </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;">  
            Geeksforzambiatek  
        </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 src="https://d3js.org/d3.v5.js"> 
    </script> 
      
</head>  
    
<body>  
    <center> 
        <h1 style="color: green;">  
            Geeksforzambiatek  
        </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, zambiatek 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!