Put a real coordinate on a map in d3.js

问题

I currently have an animation that moves a circle from the centroid of a region corresponding to one department, to another.

        var arc = g.append("path")
        .style("fill", "none")
        .style("stroke", "yellow")
        .style("stroke-width", 2)
        .attr("d", "M" + centroids.ANTIOQUIA[0] + "," + centroids.ANTIOQUIA[1] + " Q" + centroids.BOYACA[0] + "," + centroids.ANTIOQUIA[1] + " " + centroids.BOYACA[0] + "," + centroids.BOYACA[1]);

      var circle = g.append("circle")
        .attr("fill", "blue")
        .attr("r", 4)
        .style("opacity", 0)
        .attr("transform", "translate(" + centroids.ANTIOQUIA[0] + "," + centroids.ANTIOQUIA[1] + ")");

      circle.transition()
        .delay(1000)
        .duration(1000)
        .style("opacity", 1)
        .transition()
        .duration(8000)
        .attrTween("transform", translateAlong(arc.node(), circle.node()))
        .transition()
        .duration(1000)
        .style("opacity", 0);

I want the animation to start from the point I'm indicating in the image( more or less),

to a real coordinate drawn from google maps.

Colombia/@5.0653397,-75.5230936,15z/

But this time from the point I indicated in the image to a real coordinate. How can I do it? thanks.

http://jsfiddle.net/v4x8s3tw/

来源：https://stackoverflow.com/questions/45651584/put-a-real-coordinate-on-a-map-in-d3-js