D3.js zoomIdentity() Function - GeeksforGeeks

06 Sep, 2020
The d3.zoomIdentity() function in D3.js is used to get the identity transform, where k = 1, tx = ty = 0.
Syntax:
d3.zoomIdentity;

Parameters: This function does not accept any parameter.
Return Value: This function returns the identity transform.
Below programs illustrate the d3.zoomIdentity() function in D3.js.
Example 1:
HTML
<!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 | d3.zoomIdentity() 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);                            // Calling the Zoom            var rect = svg.append("rect")              .attr("width",width)              .attr("height",height)              .attr("fill","none")              .call(zoom);                                       d3.select("#reset")              .on("click", function() {                  // Creating an identity transform                var transform = d3.zoomIdentity;                                   // Applying 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:
HTML
<!DOCTYPE html> <html>     <head>     <meta charset="utf-8">         <script src=        "https://d3js.org/d3.v4.min.js">     </script> </head>       <body>     <center>        <h1 style="color: green;">             Geeksforgeeks         </h1>                 <h3>D3.js | d3.zoomIdentity() Function</h3>                    <script>            var svg = d3.select("body").append("svg")               .attr("width", 400)               .attr("height", 300);                              var g1 = svg.append("g");                           var zoom1 = d3.zoom().on("zoom", function() {                g1.attr("transform", d3.event.transform);            });                           g1.call(zoom1.transform, d3.zoomIdentity                     .translate(150, 100)                   .scale(2));                           g1.append("rect")               .attr("x", 20)               .attr("y", 20)               .attr("width", 60)               .attr("height", 60)               .attr("fill","green");                              d3.selectAll("rect").on("click", function() {                  g1.transition()                  .duration(3000)                  .attr("transform", d3.zoomIdentity)                  .on("end", function() {                        d3.select(this)                        .call(zoom1.transform, d3.zoomIdentity);                   })            });        </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.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
How to get character array from string in JavaScript?
How to remove duplicate elements from JavaScript Array ?
How to get selected value in dropdown list using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?