JSFiddle - React, Tailwind, and code Playground

by Robin Edwards

CSS

circle {
  stroke: #fff;
  stroke-width: 3px;
}
path {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

JavaScript

var pathdata = [
 [[240, 100],
  [290, 200],
  [340, 50]],
 [[340, 50],
  [90, 150],
  [140, 50],
  [190, 200]]
];

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);

var paths = svg.selectAll("path")
    .data(pathdata)
    .enter()
    .append("path")
    .attr("d", d3.svg.line())
    .attr("id",function(d, i) { return "path" + i });

// plot path vertices
svg.selectAll(".point")
    .data([].concat.apply([], pathdata))
    .enter().append("circle")
    .attr("r", 5)
    .attr("fill", "red")
    .attr("transform", function(d) { return "translate(" + d + ")"; });

// interpolate along path0
var circle = svg.append("circle")
    .attr("r", 10)
    .attr("fill", "steelblue")
    .attr("transform", "translate(" + pathdata[0][1] + ")")
    .transition()
    .duration(4000)
    .attrTween("transform", translateAlong(d3.select("#path0")[0][0]));

// interpolate along path1
var circle = svg.append("circle")
    .attr("r", 10)
    .attr("fill", "steelblue")
    .attr("transform", "translate(" + pathdata[1][1] + ")")
    .transition()
    .duration(4000)
    .attrTween("transform", translateAlong(d3.select("#path1")[0][0]));

function translateAlong(path) {
  console.log(path);
  var l = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      var p = path.getPointAtLength(t * l);
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}