Learn D3.js

Lines

The d3.line() function creates a function that generates the data string of an SVG path element:

const line = d3.line();

Calling the function with an array of [x,y] coordinates creates the path data string:

const data = [ [0,0],[100,200],[200,400],[300,150],[400,50],                      [500,350],[600,500],[700,100],[800,250]  ];const pathData = line(data);

The preceding code will store the following string in pathData:

M0,0L100,200L200,400L300,150L400,50L500,350L600,500L700,100L800,250

You can render the line obtaining a selection for an SVG <path> element and set its d attribute with this value to render the line:

d3.select("body").append("svg")         .append("path")         .attr("d", pathData)    // the path data string         .style("stroke", "red") .style("fill", "none"); ...