D3.js zoom.scaleExtent() Function

Last Updated : 30 Mar, 2023

The zoom.scaleExtent() Function in D3.js is used to set the scale extends to the specified array of numbers [k0, k1]. The k0 is the minimum allowed scale factor and k1 is the maximum allowed scale factor

Syntax:

zoom.scaleExtent([extent])

Parameters: This function accepts a single parameter as mentioned above and described below

extent: This parameter can be defined as specified as a function which returns such an array.

Return Value: This function returns the zoom behaviour.

Below programs illustrate the zoom.scaleExtent() function in D3.js

Example 1:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"> 
       
    <script src="https://d3js.org/d3.v4.min.js">  
    </script> 
      
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"> 
    </script> 
      
</head>  
     
<body>  
    <center> 
        <h1 style="color: green;">  
            Geeksforgeeks  
        </h1>  
       
        <h3>D3.js | zoom.scaleExtent() Function</h3> 
           
        <svg height="200px" width="400px"> 
          <g id="main" transform="translate(25, 25) scale(0.25)"></g> 
        </svg> 
           
        <script> 
            var svg = d3.select("#main"); 
  
            svg.append( 
"rect").attr({"x":0, "y":0, "height":100, "width":100, "fill":"red"}) 
            svg.append( 
"rect").attr({"x":100, "y":100, "height":100, "width":100, "fill":"blue"}) 
            svg.append( 
"rect").attr({"x":0, "y":100, "height":100, "width":100, "fill":"green"}) 
            svg.append( 
"rect").attr({"x":100, "y":0, "height":100, "width":100, "fill":"purple"}) 
              
            var zoom = d3.behavior.zoom().on("zoom", function(){ 
              var t = d3.event.translate; 
              var s = d3.event.scale; 
                
              svg.attr( 
"transform", "translate("+t[0]+", "+t[1]+") scale("+s+")") 
                
            }) 
            .scaleExtent([1, 10]).scale(1).translate([0, 0]) 
              
            d3.select("svg").call(zoom) 
              
            d3.selectAll("rect").on("mousedown", function(){ 
              var scale = Math.random()*3; 
              var translate = [(Math.random()*100, Math.random()*100)] 
              zoom.scale(scale); 
              zoom.translate(translate); 
                
              //new transition 
              var T = svg.transition().duration(5000) 
              zoom.event(T); 
            }) 
        </script>  
    </center> 
</body>  
   
</html> 

Output:

Example 2:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"> 
    <script src="https://d3js.org/d3.v5.js"> 
    </script> 
       
    <style> 
        circle { 
            fill: green; 
            opacity: 0.2; 
            stroke: black; 
            stroke-width: 1px; 
        } 
           
        svg { 
            border: 1px solid; 
            font: 13px sans-serif; 
            text-anchor: middle; 
        } 
    </style> 
       
</head>  
     
<body>  
    <center> 
        <h1 style="color: green;">  
            Geeksforgeeks  
        </h1>  
       
   <h3>D3.js | zoom.scaleExtent() Function</h3> 
           
        <div id="gfg" 
             style="width: 400px; 
             margin: auto"> 
        </div> 
           
        <script> 
            function zoom_filter(divId) { 
                var width = 400, height=250, maxR=30; 
               
                var svg = d3.select(divId) 
                            .append('svg') 
                            .attr('width', width) 
                            .attr('height', height) 
                var g = svg.append('g') 
               
                // create 15 circles 
                var numCircles = 55; 
                var circles = []; 
                for (var i = 0; i < numCircles; i++) 
                    circles.push( 
{'x': 1+Math.floor(Math.random() * width), 
              'y': 1+Math.floor(Math.random() * height), 
              'r': 1+Math.floor(Math.random() * maxR)}); 
               
                g.selectAll('circle') 
                    .data(circles) 
                    .enter() 
                    .append('circle') 
                    .attr('cx', function(d) { return d.x; }) 
                    .attr('cy', function(d) { return d.y; }) 
                    .attr('r', function(d) { return d.r; }) 
                    .classed('no-zoom', true) 
               
                var zoom = d3.zoom() 
                    .scaleExtent([1, 10]) 
                    .on('zoom', function(d) { g.attr( 
'transform', d3.event.transform); }); 
               
                svg.call(zoom); 
            } 
        </script>  
           
        <script> 
            zoom_filter('#gfg'); 
        </script> 
    </center> 
</body>  
   
</html>  

Output:

Suggest improvement

D3.js zoom.scaleTo() Function

Share your thoughts in the comments

D3.js zoom.scaleExtent() Function

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?