score:1

Accepted answer

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('class', 'link')
  .attr('d', diagonal)
  .attr('stroke', 'red')
  .attr('stroke-width', 3)
  .attr('fill', 'none');

d3.select('.g2')
  .datum(curveData)
  .append('path')
  .attr('class', 'link')
  .attr('d', line11)
  .attr('stroke', 'blue')
  .attr('stroke-width', 2)
  .attr('fill', 'none');
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js"></script>
  </head>
  <body>
    <svg width=500 height=500></svg>
  </body>
</html>


Related Query

More Query from same tag