D3.js zoomTransform() Function - GeeksforGeeks

07 Sep, 2020
The d3.zoomTransform() Function in D3.js is used to get the current transform for the specified node.
Syntax:
d3.zoomTransform(node)
Parameters: This function accepts a single parameter as mentioned above and described below
node: This parameter is the element that received the input event.
Return Value: This function returns the transformed zoom behaviour.
Below programs illustrate the d3.zoomTransform() function in D3.js.
Example 1:
<!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.zoomTransform() Function</h3>                   <svg width="400" height="250"></svg>                   <script>            var svg = d3.select("svg"),                width = +svg.attr("width"),                height = +svg.attr("height");                              var radius = 30;                var circle1 = {x: 100, y: height /2 } ;             var circle2 = {x: 300, y: height /2 } ;                          var circle1 = svg.append("circle")                .attr("cx", circle1.x)                .attr("cy", circle1.y)                .attr("r", radius)                .attr("fill", "red");                              var circle2 = svg.append("circle")                .attr("cx", circle2.x)                .attr("cy", circle2.y)                .attr("r", radius)                .attr("fill", "green");                              //define zoom behaviour             var zoom_handler = d3.zoom()                .on("zoom", zoom_actions);                          zoom_handler(circle2);                          function zoom_actions(){             var transform = d3.zoomTransform(this);             /* same as  this.setAttribute(                "transform", "translate(" +                 transform.x + ", "                  + transform.y + ") scale(              " + transform.k + ")"); */             this.setAttribute("transform", transform)            }          </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>       </head>      <body>     <center>        <h1 style="color: green;">             Geeksforgeeks         </h1>                <h3>D3.js | d3.zoomTransform() Function</h3>                   <canvas width="500" height="300"></canvas>                   <script>           var canvas = d3.select("canvas"),                context = canvas.node().getContext("2d"),                width = canvas.property("width"),                height = canvas.property("height"),                radius = 2.5;                          var points = d3.range(200).map(phyllotaxis(10));                          canvas.call(d3.zoom()                .scaleExtent([1 / 2, 4])                .on("zoom", zoomed));                          drawPoints();                                        var k = 1;                          function zoomed() {              context.save();              context.clearRect(0, 0, width, height);              context.translate(d3.event.transform.x, d3.event.transform.y);              context.scale(d3.event.transform.k, d3.event.transform.k);              k = d3.event.transform.k;              drawPoints();              context.restore();            }                          function drawPoints() {              context.beginPath();              points.forEach(drawPoint);              context.fill();            }                          function drawPoint(point) {              context.moveTo(point[0] + radius, point[1]);              context.arc(point[0], point[1], radius, 0, 2 * Math.PI);            }                          function phyllotaxis(radius) {              var theta = Math.PI * (3 - Math.sqrt(5));              return function(i) {                var r = radius * Math.sqrt(i), a = theta * i;                return [                  width / 2 + r * Math.cos(a),                  height / 2 + r * Math.sin(a)                ];              };            }        </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
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 ?
How to Open URL in New Tab 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?