Open In App

D3.js quadraticCurveTo() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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=
        "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.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=
        "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.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:



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