d3.js。如何从头到尾对所有数据集进行动画处理？

Question

我画了一个圆，想要运行它从数据集的第一个点过渡到最后一个点。但无法理解如何去做。代码可用 here。我该怎么做？这种动画的最佳实践是什么？

var data = [[{
    x: 10,
    y: 10,
    r: 10,
    color: "red"
}, {
    x: 70,
    y: 70,
    r: 15,
    color: "green"  
}, {
    x: 130,
    y: 130,
    r: 20,
    color: "blue"
}]];

function setUp() {

    this.attr("cx", function(d, i) {
        return d[i].x;
    }).attr("cy", function(d, i) {
        return d[i].y;
    }).attr("r", function(d, i) {
        return d[i].r;
    }).attr("fill", function(d, i) {
        return d[i].color;
    });
}

var canvas = d3.select("body")
    .append("svg")
    .attr("width", 300)
    .attr("height", 300);
canvas.append("rect")
    .attr("width", 300)
    .attr("height", 300)
    .attr("fill", "lightblue");
var circles = canvas.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
.call(setUp);

Answer 1

您要something like this吗？

var data = [[{
    x: 10,
    y: 10,
    r: 10,
    color: "red"
}], [{
    x: 70,
    y: 70,
    r: 15,
    color: "green"  
}], [{
    x: 130,
    y: 130,
    r: 20,
    color: "blue"
}]];

...

var circles = canvas.selectAll("circle")
    .data(data[0]);

circles
    .enter()
    .append("circle")
    .call(setUp);

circles
    .data(data[1])
    .transition()
    .duration(2000)
    .call(setUp)
    .each("end",function(){
    circles
        .data(data[2])
        .transition()
        .duration(2000)
        .call(setUp);
    });

编辑评论

如果点数可变，这是使用递归函数的好地方：

// first point
var circles = canvas.selectAll("circle")
    .data([data[0]]);
circles
    .enter()
    .append("circle")
    .call(setUp);

// rest of points...
var pnt = 1;
// kick off recursion
doTransition();

function doTransition(){
     circles
        .data([data[pnt]])
        .transition()
        .duration(2000)
        .call(setUp)
        .each("end",function(){
            pnt++;
            if (pnt >= data.length){
                return;
            }
            doTransition();
        });
}

已更新 example。

d3.js。如何从头到尾对所有数据集进行动画处理？

d3.js. How to animate throughout all data set from start to end?

d3.js

transition