D3.js path.toString() Function
Last Updated :
07 Aug, 2020
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...