The path.toString() function in d3.js is used to return the string representation of the path of the shape drawn. The path representation is according to the SVG’s path data specification.
Syntax:
path.toString()
Parameters: This function does not accept any parameters.
Return Value: This function returns a string.
Example 1:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" path1tent= "width=device-width,initial-scale=1.0"> <script src= </script> <style> h1 { color: green; } svg { background-color: #f2f2f2; } .path2 { stroke: #000; } </style> </head> <body> <div> <svg width="100" height="100"> <path class="path2"> </svg> </div> <script> // Creating a path var path = d3.path(); path.moveTo(10, 10); path.bezierCurveTo(95, 10, 50, 90, 10, 10) // Printing the string of the path console.log(path.toString()) path.bezierCurveTo(90, 10, 15, 110, 10, 10) // Closing the path path.closePath(); d3.select(".path2").attr("d", path); </script> </body> </html> |
Output: Path string for this shape is given in console.
Example 2:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" path1tent= "width=device-width, initial-scale=1.0"> <script src= </script> <style> h1 { color: green; } svg { background-color: #f2f2f2; } .path2 { stroke: #000; } </style> </head> <body> <div> <svg width="100" height="100"> <path class="path2"> </svg> </div> <script> // Creating a path var path = d3.path(); path.moveTo(10, 10); // Making line to x:90 and y:10 path.lineTo(90, 10); // Closing the path path.closePath(); path.moveTo(90, 10); path.lineTo(90, 90); // Closing the path path.closePath(); path.moveTo(90, 90); path.lineTo(10, 90); // Closing the path path.closePath(); path.moveTo(10, 90); path.lineTo(10, 10); // Closing the path path.closePath(); // Printing the string of the path console.log(path.toString()) d3.select(".path2").attr("d", path); </script> </body> </html> |
Output: The path string for the square shape is given in the console.
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]
[…] Here you can find 34680 more Info on that Topic: geeksforgeeks.org/d3-js-path-tostring-function/ […]