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= </script> </head> <body> <center> <h1 style="color: green;"> Geeksforneveropen </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= </script> <style> circle { opacity: 0.7; fill: #9a05a3; } </style> </head> <body> <center> <h1 style="color: green;"> Geeksforneveropen </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, neveropen 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!
… [Trackback]
[…] There you can find 10385 more Information to that Topic: geeksforgeeks.org/d3-js-transform-tostring-function/ […]
… [Trackback]
[…] There you can find 24004 more Info to that Topic: geeksforgeeks.org/d3-js-transform-tostring-function/ […]