D3.js zoom.scaleBy() Function

0 0 2 minutes read

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