The zoom.translateExtent() Function in D3.js is used to set the translate extent to the specified array of points [[top-left corner, bottom-right corner]] and returns this zoom behaviour.
Syntax:
zoom.translateExtent([extent])
Parameters: This function accepts a single parameter as mentioned above and described below
- extent: This parameter is used to set the wheel delta function to the specified function.
Return Value: This function returns the zoom behaviour.
Below programs illustrate the zoom.translateExtent() function in D3.js
Example 1:
<!DOCTYPE html> <html> <head>     <meta charset="utf-8">             <script src=     </script>            <script src=     </script> </head>       <body>     <center>         <h1 style="color: green;">             Geeksforneveropen         </h1>                 <h3>   D3.js | zoom.translateExtent() Function       </h3>                   <div id="GFG"></div>                   <script>             var height = 300;             var width = 300;                           var zoom = d3.zoom()                .translateExtent([[0, 0], [300, 300]])                 .on("zoom", zoomed);                           var svg = d3.select("#GFG")                     .append("svg")                     .attr("width", height)                     .attr("height", width)                     .append("g")                                   svg.append("rect")                     .attr("x", 0)                     .attr("y", 0)                     .attr("height", 200)                     .attr("width", 400)                     .style("fill", "green");                                          var circle = svg.append("circle")                     .attr("cx", 100)                     .attr("cy", 100)                     .attr("r", 20)                     .style("fill", "red")                                       svg.call(zoom);                                   function zoomed() {                   circle.attr(                     "transform", d3.event.transform);                 }         </script>     </center> </body>     </html> |
Output:
Example 2:
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />           <script src=       </script>           <script src=       </script>           <style>             #svg {                 background-color: rgb(149, 160, 230);             }             #shape {                 fill: rgb(232, 7, 228);                 stroke: white;                 stroke-width: 3px;             }             #shape:hover {                 fill: rgb(13, 214, 30);             }         </style>     </head>       <body>         <center>             <h1 style="color: green;">                 Geeksforneveropen             </h1>               <h3>D3.js | zoom.translateExtent() Function</h3>               <div id="GFG"></div>               <script>                 var width = 300,                     height = 200;                   var container =                     d3.select("#GFG").append("div");                   var svg =                     container.append(                       "svg").attr(                       "id", "svg").attr(                       "width", width).attr(                       "height", height);                   var group = svg.append("g");                   var shape = group.append(                   "rect").attr(                   "id", "shape").attr(                   "width", 150).attr(                   "height", 100).attr(                   "x", 75).attr("y", 50);                   zoom = d3                     .zoom()                     .scaleExtent([1, 3])                     .translateExtent([                         [0, 0],                         [width, height],                     ])                     .on("zoom", zoomed);                   svg.call(zoom);                   function zoomed() {                     change = d3.event.transform;                     console.log(change);                     group.attr("transform", "translate(" +                     [change.x, change.y] + ")scale(" +                     change.k + ")");                     group.select("#shape").style(                         "stroke-width", 3 / change.k + "px");                 }             </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!
