D3.js zoom.scaleTo() Function

Last Updated : 25 Jul, 2024

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;"> 
            Geeksforgeeks 
        </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;"> 
            Geeksforgeeks 
        </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:

D3.js scalePow() Function

SHUBHAMSINGH10

Improve

Article Tags :

D3.js zoom.scaleTo() Function

Similar Reads

Thank You!

What kind of Experience do you want to share?