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!
