D3.js zoom.transform() Function - GeeksforGeeks

07 Sep, 2020
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 src="https://d3js.org/d3.v4.min.js">     </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;">             Geeksforgeeks         </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 src="https://d3js.org/d3.v4.min.js">     </script>     <style>        rect {          cursor: pointer;        }    </style></head> <body>     <center>        <h1 style="color: green;">             Geeksforgeeks         </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:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?