D3 Examples - Chained Transitions: Point-Along-Path Using attrTween

xxxxxxxxxx
 
<!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>
​
<svg width="960" height="500"></svg>        <!-- SVG graphics will go here  -->
​
<script type="text/javascript">
// Set the parameters
var timeToTravelPath = 3000;
var pathPoints = [
  [80, 200],
  [400, 400],
  [600, 200],
  [800, 400]
];
​
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>
​
    