Open In App

D3.js bezierCurveTo() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 07 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads