score:1

d3 can do all kind of visualisation. What are you asking it is line interpolation. Out of the box the box d3 supports

• linear
• List item
• step-before
• step-after
• basis
• basis-open
• basis-closed
• bundle
• cardinal
• cardinal-open
• cardinal-closed
• monotone

There two links with interpolation comparisons - https://bl.ocks.org/emmasaunders/f7178ed715a601c5b2c458a2c7093f78 - https://bl.ocks.org/d3noob/ced1b9b18bd8192d2c898884033b5529

These interpolations available from the box, but not limited to it. You can write your own interpolation on d3, f.e. https://bl.ocks.org/mbostock/3310323

Have added snipped of the code. Alternatively you may use d3.svg.diagonal()

``````let curveData = [{ x: 190, y: 100 }, { x: 269, y: 50 }, { x: 360, y: 150 }];
let edge = d3.select('svg').append('g').attr('class', 'g1');
let edge2 = d3.select('svg').append('g').attr('class', 'g2');

var line11 = d3.svg.line()
.x(function(d) { return (d.x ) })
.y(function(d) { return (d.y ) })
.interpolate('cardinal');

let diagonal = d3.svg.diagonal()
.source(function (d) { return { x: d[0].y, y: d[0].x }; })
.target(function (d) { return { x: d[d.length - 1].y, y: d[d.length - 1].x }; })
.projection(function (d) { return [d.y, d.x]; });

d3.select('.g1')
.datum(curveData)
.append('path')
.attr('d', diagonal)
.attr('stroke', 'red')
.attr('stroke-width', 3)
.attr('fill', 'none');

d3.select('.g2')
.datum(curveData)
.append('path')
.attr('d', line11)
.attr('stroke', 'blue')
.attr('stroke-width', 2)
.attr('fill', 'none');``````
``````<!DOCTYPE html>
<html>