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:
