D3.js bezierCurveTo() Function - GeeksforGeeks

07 Aug, 2020
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=        "https://d3js.org/d3.v4.min.js">    </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=        "https://d3js.org/d3.v4.min.js">    </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:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript