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

Question

我正在将一个元素从一个点移动到另一个点。但我特别想实现这个动画:

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

我对 d3.js 的了解有点有限，我不知道如何生成这条曲线，我也不知道如何做 3d 透视图，圆圈应该出现，然后变得很小并逐渐长大，最终变小直到消失，就像在附加的链接中一样。我该怎么做？

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]);

Answer 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 著名的 translate along path沿该弧平移元素的代码。我更改了函数以将元素与路径一起传递，因此我们可以更改其大小:

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 可以采用的值范围。

这是更新后的 fiddle :http://jsfiddle.net/zkc2wton/

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