D3.js transform.toString() Function

0 0 1 minute read

The transform.toString() Function in D3.js is used to get a string representing the SVG transform corresponding to this transform.

Syntax:

transform.toString()

Parameters: This function does not accept any parameter.

Return Value: This function returns a string value that can be used to set zoom behavior.

Below programs illustrate the transform.toString() 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;">  
            Geeksforzambiatek  
        </h1>  
        
        <h3>D3.js | transform.toString() 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 circle = {x: 200, y: height /2 } ;  
                   
            var circle = svg.append("circle") 
                .attr("cx", circle.x) 
                .attr("cy", circle.y) 
                .attr("r", radius) 
                .attr("fill", "green"); 
                   
            // Defining zoom behaviour  
            var zoom_handler = d3.zoom() 
                .on("zoom", zoom_actions); 
               
            zoom_handler(circle); 
               
            function zoom_actions(){ 
                var transform = d3.event.transform;  
  
                // Setting attribute using this method 
                this.setAttribute("transform",  
                           transform.toString()); 
            } 
   
        </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> 
        
    <style> 
        circle { 
          opacity: 0.7; 
          fill: #9a05a3; 
        } 
    </style> 
</head>  
      
<body>  
    <center> 
        <h1 style="color: green;">  
            Geeksforzambiatek  
        </h1>  
        
        <h3>D3.js | transform.toString() Function</h3> 
            
        <svg></svg> 
            
        <script> 
            var transform = d3.zoomIdentity 
                .translate(100, 0).scale(1); 
  
            var zoom = d3.zoom().on("zoom", handleZoom); 
                  
            var svg = d3.select("svg") 
              .attr('width', 300) 
              .attr('height', 250) 
              .style("background", "#31c460") 
              .call(zoom)                       
              .call(zoom.transform, transform); 
            
            var zoomable = svg 
              .append("g") 
              .attr("class", "zoomable") 
              .attr("transform", transform);    
                  
            var circles = zoomable.append('circle') 
              .attr("id", "circles") 
              .attr("cx", 50) 
              .attr("cy", 125) 
              .attr('r', 30); 
            
            function handleZoom(){ 
              if (zoomable) { 
                // Setting attribute using this method 
                zoomable.attr("transform",  
                    d3.event.transform.toString()); 
              } 
            }; 
        </script>  
    </center> 
</body>  
    
</html>

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek 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!