The d3.line() method is used to constructs a new line generator with the default settings. The line generator is then used to make a line.
Syntax:
d3.line();
Parameters: This method takes no parameters.
Return Value: This method returns a line Generator.
Example 1: Making a simple line using this method.
<!DOCTYPE html> < html > < meta charset = "utf-8" > < head >   < title >Line in D3.js</ title > </ head > < script src = </ script >   < style > path {     fill: none;     stroke: green; } </ style >   < body >     < h1 style="text-align: center;         color: green;">neveropen</ h1 >   < center >     < svg width = "500" height = "500" >     < path ></ path >   </ svg > </ center >   < script >         // Making a line Generator         var Gen = d3.line();         var points = [             [0, 100],             [500, 100]                      ];           var pathOfLine = Gen(points);           d3.select('path')             .attr('d', pathOfLine);   </ script > </ body > </ html > |
Output:
Example 2: Making a Multiconnected line.
<!DOCTYPE html> < html > < meta charset = "utf-8" > < head >   < title >Line in D3.js</ title > </ head > < script src = </ script >   < style > path {     fill: none;     stroke: green; } </ style >   < body >     < h1 style="text-align: center;         color: green;">neveropen</ h1 >   < center >     < svg width = "500" height = "500" >     < path ></ path >   </ svg > </ center >   < script >         // Making a line Generator         var Gen = d3.line();         var points = [             [0, 100],             [500, 100],             [200, 200],             [500, 200]                      ];           var pathOfLine = Gen(points);           d3.select('path')             .attr('d', pathOfLine);   </ script > </ body > </ html > |
Output: