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

Question

I draw a circle and want to run it transition from first to the last point of data set. But can't understand how to do it. Code available here. How can i do it? What is the best practice for this kind of animation?

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

[This question](http://stackoverflow.com/questions/13215615/using-d3-transition-method-with-data-for-scatter-plot) should help. — Lars Kotthoff, Apr 25 '15 at 23:55
It didn't help me. In the examples used random set of data on every iteration and infinitive loop. But i have ordered data set (1, 2, 3...) with finite number of points — zeleniy, Apr 26 '15 at 10:26

Mark · Accepted Answer · 2015-04-26T17:18:42.117

Are you looking to do 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);
    });

Edits For Comment

If you have a variable number of points, this is a great place to use a recursive function:

// 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();
        });
}

Updated example.

Mmm... your code is very hard in sense that it does predefined set of iteration. So if i add yet 20 points it will be not iterate over all data set, but just first 3 points. — zeleniy, Apr 26 '15 at 15:19
@zeleniy, that's not hard to fix. Not near a computer at the moment, I will update my answer this afternoon. — Mark, Apr 26 '15 at 15:52

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

1 Answers1