Chained Transitions: Point-Along-Path Using attrTween

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  path {
    fill: none; 
    stroke: #000;
    stroke-width: 0px;
  }
  circle {
    fill: green;
    stroke: white;
    stroke-width: 3px;
  }
</style>
</head>
<body>

var svg = d3.select("svg");

// Draw the path; doesn't show up because of path style above makes it invisible
var path = svg.append("path")
    .data([pathPoints])
    .attr("d",  d3.line()
    .curve(d3.curveCatmullRom.alpha(0.5))
    );

[0,1,2].forEach(function (d) {
  // Create the circle that's going to travel around the path
  svg.append("circle")
    .attr("r", 13)
    .attr("transform", "translate(" + pathPoints[0] + ")")   // Starts the circle at the first point
    .transition()
      .duration(timeToTravelPath)
      .delay(d * 250)
      .ease(d3.easeLinear)
      .attrTween("transform", translateAlong(path.node()))
      .transition()
        .duration(300)
        .ease(d3.easeLinear)
        .attr("r", 20)
      ;
    });

// Returns the commands for creating the specified path
// And yeah, this is weird -- really don't sweat this unless you are planning on using this technique a bunch
function translateAlong(path) {
  var pathLength = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      var p = path.getPointAtLength(t * pathLength);
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}
</script>

</body>
</html>

https://d3js.org/d3.v4.min.js