Accepted answer
// draw the flow line
let flowLine = d3.line()
  .x((d) => { return d.x; })
  .y((d) => { return d.y; })

// append each flow to the svg
  .data(arrayOfCoordinates) // [[{1, 1},{{2, 2}}][{3, 3},{{4, 5}}]] - centroid coordinates for arcs in the circle
  .style('fill', 'none')
  .style("stroke", '#000')
  .style('stroke-width', '1px')
  .attr('d', flowLine);

For more details:


I think you should be able to use a d3.ribbon() generator -

Just pass the same value for startAngle and endAngle for the source and target parameters, and it will give you a path string which you can set as path element data.

Related Query

More Query from same tag