The d3.line.curve() method is used to give a curve to our line. D3.js provides several curve factories that can be used to give different curves.
Syntax:
d3.line.curve(curve_factory);
Parameters:
- curve_factory: type of curve to be given to the line.
Return Value: This method has no return value.
Example 1: In this example, we will use the curveBasis curve factory.
<!DOCTYPE html> <html> <meta charset="utf-8"> <head>   <title>d3.line.curve()</title> </head> <script src= </script>   <body>     <h1 style="text-align: center;         color: green;">neveropen</h1>   <center>     <svg id="gfg" width="200" height="200"></svg> </center>   <script> var points = [   {xpoint: 25, ypoint: 150},   {xpoint: 75, ypoint: 85},   {xpoint: 100, ypoint: 115},   {xpoint: 175, ypoint: 25}];   var Gen = d3.line()   .x((p) => p.xpoint)   .y((p) => p.ypoint)   .curve(d3.curveBasis);     d3.select("#gfg")   .append("path")   .attr("d", Gen(points))   .attr("fill", "none")   .attr("stroke", "green");   </script> </body> </html> |
Output:
Example 2: In this example, we will use the curveCardinal curve factory.
<!DOCTYPE html> <html> <meta charset="utf-8"> <head>   <title>d3.line.curve()</title> </head> <script src= </script>   <body>     <h1 style="text-align: center;                color: green;">          neveropen     </h1>   <center>     <svg id="gfg" width="200"          height="200">     </svg> </center>   <script> var points = [   {xpoint: 25, ypoint: 150},   {xpoint: 75, ypoint: 85},   {xpoint: 100, ypoint: 115},   {xpoint: 175, ypoint: 25}];   var Gen = d3.line()   .x((p) => p.xpoint)   .y((p) => p.ypoint)   .curve(d3.curveCardinal);   d3.select("#gfg")   .append("path")   .attr("d", Gen(points))   .attr("fill", "none")   .attr("stroke", "green");   </script> </body> </html> |
Output:
