D3.js zoomTransform() Function

Last Updated : 26 Jul, 2024

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:

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.zoomTransform() Function</h3>
         
        <svg width="400" height="250"></svg>
         
        <script>
            let svg = d3.select("svg"),
                width = +svg.attr("width"),
                height = +svg.attr("height");
                
            let radius = 30;    
            let circle1 = {x: 100, y: height /2 } ; 
            let circle2 = {x: 300, y: height /2 } ;
            
            let circle1 = svg.append("circle")
                .attr("cx", circle1.x)
                .attr("cy", circle1.y)
                .attr("r", radius)
                .attr("fill", "red");
                
            let circle2 = svg.append("circle")
                .attr("cx", circle2.x)
                .attr("cy", circle2.y)
                .attr("r", radius)
                .attr("fill", "green");
                
            //define zoom behaviour 
            let zoom_handler = d3.zoom()
                .on("zoom", zoom_actions);
            
            zoom_handler(circle2);
            
            function zoom_actions(){
             let 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:

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.zoomTransform() Function</h3>
         
        <canvas width="500" height="300"></canvas>
         
        <script>
           let canvas = d3.select("canvas"),
                context = canvas.node().getContext("2d"),
                width = canvas.property("width"),
                height = canvas.property("height"),
                radius = 2.5;
            
            let points = d3.range(200).map(phyllotaxis(10));
            
            canvas.call(d3.zoom()
                .scaleExtent([1 / 2, 4])
                .on("zoom", zoomed));
            
            drawPoints();
            
            
            let 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) {
              let theta = Math.PI * (3 - Math.sqrt(5));
              return function(i) {
                let 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 zoom.transform() Function

SHUBHAMSINGH10

Improve

Article Tags :

D3.js zoomTransform() Function

Syntax:

Parameters: This function accepts a single parameter as mentioned above and described below

Return Value:

Similar Reads

Thank You!

What kind of Experience do you want to share?