D3 animated arrows along paths

Question

I created a block of my problem http://bl.ocks.org/Mbrownshoes/5e36771400038b0c861c6617c622c5f7

I would like the arrows to move along the paths as they move. I am currently adding arrows using .attr ("marker-end" ..), but it is not surprising that it adds arrows to the end position and not to the move position. There are several examples of moving one arrow along a long one path ( http://bl.ocks.org/dem42/e10e933990ee662c9cbd ), but how can I make all these arrows move forward all these paths?

        route_path = g.selectAll(".route")
        // .data(migration.filter(function(d) {
        //     return d.Province != 'International';
        // }))
        .data(migration)
        .enter()
        .append("path")
        .attr("class", "route")
        .attr('d', function(d, i) {
            line_data.forEach(function(j) {
                // console.log(ii)
                if (j.prov.PRENAME == d.Province) {
                    d.coords = j.coords
                }
                if (d.Province == 'International') {
                    d.coords = [-139.75635246400601, 53.75809690349844]
                }
            })
            // console.log(d)
            d.net = Number(d.Origin) - Number(d.Destination)
            // define the location for arrow to start/end in bc here
            bc_coords = [-122.75635246400601, 54.75809690349844];
            if (d.Province == 'Nunavut') {
                bc_coords = [-122.75635246400601, 57.75809690349844]
            } else if (d.Province == 'Alberta') {
                bc_coords = [-121.245605, 52.263570]
            } else if (d.Province == 'Yukon') {
                bc_coords = [-130.417969, 59.562099]
            } else if (d.Province == 'Saskatchewan') {
                bc_coords = [-121.394922, 53.469826]
            } else if (d.Province == 'Manitoba') {
                bc_coords = [-121.146484, 54.262016]
            } else if (d.Province == 'Northwest Territories') {
                bc_coords = [-122.167969, 59.462099]
            } else if (d.Province == 'Newfoundland and Labrador') {
                bc_coords = [-122.146484, 56.386543]
            } else if (d.Province == 'International') {
                bc_coords = [-138.346484, 53.76543]
            } else if (d.Province == 'Quebec') {
                bc_coords = [-122.046484, 55.586543]
            }


            if (d.net < 0) {

                return path({
                    type: "LineString",
                    coordinates: [
                        bc_coords,
                        // [-122.75635246400601, 54.75809690349844], // BC
                        d.coords
                    ]
                })
                // }
            } else {
                // if (d.Province == 'Alberta') {
                return path({
                    type: "LineString",
                    coordinates: [
                        d.coords, bc_coords // BC

                    ]
                })
                // }

            }

        })
        // .style("stroke-dasharray", ("5, 3"))
        .attr("stroke", function(d, i) {
            // console.log(d.Destination)
            if (Number(d.Origin) - Number(d.Destination) > 0) {
                return "#3f51b5";
            } else {
                return "#D32F2F";
            }
        })
        .style("stroke-width", function(d) {
            // console.log(Math.abs((Number(d.Origin) - Number(d.Destination))))
            return line_size(Math.abs((Number(d.Origin) - Number(d.Destination))));
        })
        .style("opacity", .8)
        .transition()
  .duration(2000)
  .attrTween("stroke-dasharray", function() {
    var len = this.getTotalLength();
    return function(t) {
      return (d3.interpolateString("0," + len, len + ",0"))(t)
    };
  }).attr("marker-end", function(d) {
        // console.log(d)
        if (d.net > 0) {
            return "url(#end-arrow)"
        } else {
            return "url(#end-arrow-neg)"
        }
    })