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>neveropen</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>neveropen</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:
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]
[…] Find More here on that Topic: geeksforgeeks.org/d3-js-quadraticcurveto-function/ […]