使用d3.js实现元素的过渡效果 [英] Achieve transition effect of an element using d3.js

问题描述

我正在将元素从一个点移动到另一个点.但具体来说，我想实现以下动画:

I'm moving an element from one point to another. But specifically I want to achieve this animation:

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

我在d3.js中的知识有所限制，我不知道如何生成该曲线，也不知道如何进行3d透视，即应在其中出现圆，然后变小并逐渐增大，最终变小直到消失，以及附带的链接中的.我该怎么办?

My knowledge in d3.js are somewhat limited, I do not know how to generate this curve line and I also do not know how to do 3d perspective, in which the circle should appear, then be very small and grow and eventually become small until disappearing, as well As in the attached link. How can I do it?

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个主要步骤:

My answer contain 3 main steps:

首先，我们必须创建一条从A点到B点的路径，模拟一条弧.有几种方法可以做到这一点，您的问题尚不清楚.在这里，我使用的是二次曲线:

First, we have to create a path from point A to point B, simulating an arc. There are several ways to do that, and your question is not clear. Here, I'm using a quadratic curve:

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

此路径可以有颜色或透明，都没关系.

This path can have a colour or be transparent, it doesn't matter.

第二，我们使用Bostock著名的沿路径平移代码来沿该弧线平移元素.我更改了函数以将元素与路径一起传递，因此我们可以更改其大小:

Second, we use Bostock's famous translate along path code to translate the element along that arc. I changed the function to pass the element along with the path, so we can change its size:

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

最后，我使用线性比例使圆又变大和变小:

Finally, I'm using a linear scale to make the circle big and small again:

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

此处的域从0到1，因为这是参数t可以假定的值的范围.

The domain here goes from 0 to 1 because this is the range of values the parameter t can assume.

以下是更新的小提琴: http://jsfiddle.net/zkc2wton/

Here is the updated fiddle: http://jsfiddle.net/zkc2wton/

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

Here is a second fiddle, changing the opacity at the beginning and at the end of the movement: http://jsfiddle.net/4pdusase/

这篇关于使用d3.js实现元素的过渡效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！