D3.js transform.toString() Function - GeeksforGeeks

02 Sep, 2020
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;">             Geeksforgeeks         </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;">             Geeksforgeeks         </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:
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
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript