The zoom.transform() function in D3.js is used to set the current zoom transform of the selected elements to the specified transform.
Syntax:
zoom.transform(selection, transform[, point]);
Parameters: This function accepts single parameter as mentioned above and described below:
- selection: This parameter can be selection or transition.
- transform: This parameter can be defined as a zoom transform or as a function.
Return Value: This function returns the zoom transform.
Below programs illustrate the zoom.transform() function in D3.js
Example 1:
<!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.transform() Function</h3> <button id="reset">Reset</button><br/> <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() .scaleExtent([1, 10]) .translateExtent([[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); d3.select("#reset") .on("click", function() { // Create an identity transform var transform = d3.zoomIdentity; // Apply the transform: rect.call(zoom.transform, transform); }) function zoomed() { var t = d3.event.transform; scale.domain(t.rescaleX(shadowScale).domain()); g.call(axis); } </script> </center> </body> </html> |
Output:
Example 2:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </script> <style> rect { cursor: pointer; } </style> </head> <body> <center> <h1 style="color: green;"> Geeksforneveropen </h1> <h3>D3.js | zoom.transform() Function</h3> <button>Trigger Zoom</button> <br/> <span> Zoom Level: </span> <span id="GFG"></span><br/> <svg></svg> <script> var scale = d3.scaleSqrt() .range(["green", "purple", "blue"]) .domain([1, 40, 1600]); var zoom = d3.zoom() .on("zoom", zoomed) .scaleExtent([1, 1600]) var rect = d3.select("svg") .append("rect") .attr("width", 400) .attr("height", 300) .attr("fill", "green") .call(zoom); rect.call(zoom.transform, d3.zoomIdentity); d3.select("button").on("click", function() { var newTransform = d3.zoomIdentity.scale(100); rect.call(zoom.transform, newTransform); }) // Zoom function: function zoomed(){ var k = d3.event.transform.k; rect.attr("fill", scale(k)); d3.select("#GFG").text(k); } </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!
