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&quot...