如何在D3.js中为地图上的路径上的点设置动画？

我有一张地图，我已经成功地在地图上绘制了一组线串

但我真正想做的是，沿着每一行字符串定义的路线设置圆的动画

我看了一些例子（，），但我不确定我是如何将圆放在起点，然后让它们沿着路径走的

这是我绘制的路径图（红色表示可见性） 这是我的代码-

hydro_map

是一个转换为GeoJSON功能集合的形状文件，

stations

是一个GeoJSON功能集合（仅点），

links

是一个LineString数组。我想创建圆，并将它们沿我创建的每个路径向下过渡

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"
});

---

如果路径是直线，则可以沿路径移动一个圆，如下所示

var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
var path=svg.append（“路径”）
.attr（“d”，“M 100 350 l 150-300”）
.attr（“填充”、“无”）
.attr（“笔划”、“黑色”）；
var circle=svg.append（“circle”）
.attr（“r”，5）
.attr（“cx”，100）
.attr（“cy”，350）；
var pathEl=path.node（）；
对于（var i=0；iif LineString是一个点数组，您可以使用起点和终点作为圆的坐标，然后使用过渡使它们沿点之间的直线移动搜索
笔划-划线插值