D3.js quadraticCurveTo() Function
Last Updated :
09 Aug, 2020
The d3.path.quadraticCurveTo() function is used to draw the quadratic bezier segment to a certain point from the current points via certain control points.
Syntax:
path.quadraticCurveTo(cpx, cpy, x, y)
Parameters: It takes four parameters as given above and described below.
- cpx: It is the x-coordinate of the quadratic control point.
- cpy: It is the y-coordinate of the quadratic control point.
- x: It is the x-coordinate of the ending point.
- y: It is the y-coordinate of the ending point.
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 >
< h1 >GeeksforGeeks</ h1 >
< b >D3.js | Path.quadraticCurveTo() Function</ b >
< br >< br >
< svg width = "100" height = "100" >
< path class = "path2" >
</ svg >
</ div >
< script >
// Creating a path
var path = d3.path();
path.moveTo(50, 50);
path.quadraticCurveTo(95, 0, 50, 90)
// Closing the path
path.closePath();
path.quadraticCurveTo(5, 0, 50, 90)
// Closing the path
path.closePath();
d3.select(".path2").attr("d", path);
</ script >
</ body >
</ html >
|
Output:
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 >
< h1 >GeeksforGeeks</ h1 >
< b >D3.js | Path.quadraticCurveTo() Function</ b >
< br >< br >
< svg width = "100" height = "100" >
< path class = "path2" >
</ svg >
</ div >
< script >;
// Creating a path
var path = d3.path();
path.moveTo(10, 10);
path.quadraticCurveTo(95, 0, 50, 90)
// Closing the path
path.closePath();
d3.select(".path2").attr("d", path);
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...