D3.js zoom.scaleExtent() Function - GeeksforGeeks

09 Sep, 2020
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:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript