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!
