CODEWITHSUNDEEP
d3.jstransition
zeleniy
zeleniy

Reputation: 2272

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

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

Upvotes: 0

Views: 1006

Answers (1)

Mark
Mark

Reputation: 108567

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.

Upvotes: 1

Related Questions