使用d3.js实现元素的过渡效果

我正在将一个元素从一个点移动到另一个点。但具体来说我想实现这个动画：

http://carto.net/svg/samples/path_animation.svg http://carto.net/svg/samples/path_animation.svg

我在 d3.js 方面的知识有些有限，我不知道如何生成这条曲线，也不知道如何进行 3d 透视，其中圆圈应该出现，然后变得很小并增长，最终变小直到消失，以及附加链接中的消失。我该怎么做？

http://jsfiddle.net/bzfs55bg/ http://jsfiddle.net/bzfs55bg/

      var circle = svg.append("circle")
        .attr("fill", "blue")
        .attr("r", 4)
        .attr("cx", centroids.ANTIOQUIA[0])
        .attr("cy", centroids.ANTIOQUIA[1]);

      circle.transition()
        .delay(1000)
        .duration(2000)
        .attr("cx", centroids.BOYACA[0])
        .attr("cy", centroids.BOYACA[1]);

我的回答包含3个主要步骤：

首先，我们必须创建一条从 A 点到 B 点的路径，模拟弧线。有多种方法可以做到这一点，但你的问题不清楚。在这里，我使用二次曲线：

var arc = svg.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]);

这条路径可以有颜色或透明，都没关系。

其次，我们使用Bostock著名的沿路径平移 https://bl.ocks.org/mbostock/1705868沿该弧平移元素的代码。我更改了函数以将元素与路径一起传递，因此我们可以更改其大小：

circle.transition()
    .duration(5000)
    .attrTween("transform", translateAlong(arc.node(), circle.node()));
    //the second argument is the circle -----------------^

function translateAlong(path, circle) {
    var l = path.getTotalLength();
    return function(d, i, a) {
        return function(t) {
            d3.select(circle).attr("r", circleSize(t))
            //here we can change circle's size
            var p = path.getPointAtLength(t * l);
            return "translate(" + p.x + "," + p.y + ")";
        };
    };
}

最后，我使用线性比例再次放大和缩小圆：

var circleSize = d3.scale.linear()
    .domain([0, 0.5, 1])
    .range([4, 10, 4]);

这里的域从 0 到 1，因为这是参数值的范围t可以假设。

这是更新的小提琴：http://jsfiddle.net/zkc2wton/ http://jsfiddle.net/zkc2wton/

这是第二个小提琴，改变运动开始和结束时的不透明度：http://jsfiddle.net/4pdusase/ http://jsfiddle.net/4pdusase/