D3.js bezierCurveTo() Function
The d3.bezierCurveTo() function in d3.js is used to draw the cubic-bezier segment to a certain point from the current given point via certain control points.
Syntax:
path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y);
Parameters: This function takes the following parameters.
- cpx1: It is the x1-coordinate of the bezier control point.
- cpy1: It is the y1-coordinate of the bezier control point.
- cpx2: It is the x2-coordinate of the bezier control point.
- cpy2: It is the y2-coordinate of the bezier control point.
- x: It is the x-coordinate of the endpoints.
- y: It is the y-coordinate of the endpoint.
Return Value: This function does not return any value.
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.bezierCurveTo() 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.bezierCurveTo(95, 10, 50, 90, 10, 10) // 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.bezierCurveTo() 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.bezierCurveTo(95, 10, 50, 90, 10, 10) // Closing the path path.closePath(); path.bezierCurveTo(90, 10, 15, 110, 10, 10) // Closing the path path.closePath(); d3.select(".path2").attr("d", path); </script></body> </html> |
Output:
Please Login to comment...