Question

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

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

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

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

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

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

Answer 2

如何在点之间绘制曲线：

                     //draw a line  
                    var curveData = [{ x: centroids.ANTIOQUIA[0], y: centroids.ANTIOQUIA[1] }, { x: centroids.BOYACA[0], y: centroids.BOYACA[0] }];
                    //make a line function
                    var lineFunction = d3.svg.line()
                          .x(function(d) { return d.x; })
                          .y(function(d) { return d.y; })
                          .interpolate("monotone");//change it as per your choice.

//make a path       
var myPath = d3.select('svg').append("path")
                            .attr("d", lineFunction(curveData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none");

请参考您想要的曲线插值here

沿着一条线进一步移动点并消失。

//transition along a path
  circle.transition()
      .duration(10000)

      .attrTween("transform", translateAlong(myPath.node()))
        .style("opacity",0);//transitioning the opacity to make it vanish.                  
// Returns an attrTween for translating along the specified path element.
function translateAlong(path) {
  var l = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      var p = path.getPointAtLength(t * l);
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}

3d我不知道：（

工作代码here

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

2 个答案: