How do I animate points down a path on a map in D3.js?

Question

I've got a map, and I've successfully plotted an array of LineStrings on the map.

But what I really want to do is animate circles down the route each LineString defines.

I've looked at a few examples (http://bl.ocks.org/zross/6a31f4ef9e778d94c204, http://www.tnoda.com/blog/2014-04-02) but I'm not sure how I actually put circles at the starting points, and then make them follow the path.

Here's my map with paths plotted (in red for visibility) Here's my code - hydro_map is a shapefile converted to a GeoJSON FeatureCollection, stations is a GeoJSON feature collection (just points), and links is an array of LineString. I want to create circles, and transition them down each of the paths I created.

var width = 900, height = 800;
var projection = d3.geo.mercator().center([-87.55,41.919]).scale(170000);
var path = d3.geo.path().projection(projection);

var svg = d3.select("#output").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.zoom()
    .on("zoom", redraw))
    ;

var g = svg.append("g");
var terrainGroup = g.append("g");
var arcGroup = g.append("g");
var stationGroup = g.append("g");
var tripGroup = g.append("g");

//draw terrain
terrainGroup.append("path")
         .datum({type: "FeatureCollection", features: hydro_map.features})
         .attr("d", path)
         .style("fill", "#3db7e4");

//plot stations
stationGroup.selectAll("circle")
    .data(stations.features).enter()
    .append("path")
    .attr("d", path.pointRadius(0.5));

//draw paths between stations
var pathArcs = arcGroup.selectAll(".arc")
                        .data(links);
pathArcs.enter()
        .append("path")
        .attr({"class": "arc"})
        .style({fill: "none",})
        .attr({d: path})
        .style({
            stroke: "red",
            "stroke-width": "0.5px"
});

Answer 1

If the paths are straight lines, moving a circle along the path can be done as shown below.

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

var path = svg.append("path")
   .attr("d","M 100 350 l 150 -300")
   .attr("fill","none")
   .attr("stroke","black");

var circle = svg.append("circle")
   .attr("r",5)
   .attr("cx",100)
   .attr("cy",350);

var pathEl = path.node();
for(var i=0;i<pathEl.getTotalLength();i++){
    var pt = pathEl.getPointAtLength(i);
    circle.transition()
        .duration(3500)
        .attr("cx",pt.x)
        .attr("cy",pt.y);
}

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

If paths are curved lines, you can use attrTween to accomplish the task.

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

var path = svg.append("path")
   .attr("d","M 100 350 q 150 -300 300 0")
   .attr("fill","none")
   .attr("stroke","black").call(transition);

var startPoint = pathStartPoint(path);
 
  var marker = svg.append("circle");
  marker.attr("r", 7)
    .attr("id", "marker")
    .attr("transform", "translate(" + startPoint + ")");
 
  function pathStartPoint(path) {
    var d = path.attr("d"),
    dsplitted = d.split(" ");
    return dsplitted[1];
  }
 
  function transition(path) {
    path.transition()
        .duration(3500)
        .attrTween("stroke", tweenDash)
        //.each("end", function() { d3.select(this).call(transition); }); infinite loop
  }
 
  function tweenDash() {
    var l = path.node().getTotalLength();
    return function(t) {
      var marker = d3.select("#marker");
      var p = path.node().getPointAtLength(t * l);
      marker.attr("transform", "translate(" + p.x + "," + p.y + ")");
      return "black";
    }
  }

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>