The zoom.extent() Function in D3.js is used to set the viewport extent to the specified array of points [top-left corner, bottom-right corner].
Syntax:
zoom.extent([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.extent() function in D3.js
Example 1:
<!DOCTYPE html> <html> <head>     <meta charset="utf-8">      </script> </head>     <body>     <center>         <h1 style="color: green;">             Geeksforneveropen         </h1>               <h3>D3.js | zoom.extent() Function</h3>                   <div id="GFG"></div>                   <script>             var svg = d3.select("#GFG")               .append("svg")                 .attr("width", 300)                 .attr("height", 200)                 .call(d3.zoom()                 .extent([[0, 0], [200, 200]])                 .on("zoom", function () {                    svg.attr(              "transform", d3.event.transform)                 }))               .append("g")                           svg               .append("circle")                 .attr("cx", 150)                 .attr("cy", 100)                 .attr("r", 40)                 .style("fill", "green")                       </script>     </center> </body>   </html> |
Output:
Example 2:
<!DOCTYPE html> <html> <head>     <meta charset="utf-8">            </script>            <style>         svg text {              fill: green;              font: 20px sans-serif;              text-anchor: center;          }                     rect {           pointer-events: all;         }     </style>       </head>      <body>     <center>         <h1 style="color: green;">             Geeksforneveropen         </h1>                <h3>D3.js | zoom.extent() Function</h3>                    <svg></svg>                    <script>             var width = 400;             var height = 200;                            var svg = d3.select("svg")               .attr("width", width)               .attr("height", height);                              // The scale used to display the axis.             var scale = d3.scaleLinear()               .range([10, width-20])               .domain([0, 100]);                             var shadowScale = scale.copy();                            var axis = d3.axisBottom()               .scale(scale);                              var g = svg.append("g")               .attr("transform", "translate(0, 50)")               .call(axis);                              // Standard zoom behavior:             var zoom = d3.zoom()               .extent([[0, 0], [width, height]])               .on("zoom", zoomed);                             // Call the Zoom.             var rect = svg.append("rect")               .attr("width", width)               .attr("height", height)               .attr("fill", "none")               .call(zoom);                             function zoomed() {               var t = d3.event.transform;               scale.domain(t.rescaleX(shadowScale).domain());               g.call(axis);             }         </script>     </center> </body>    </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen 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!
