Question

I m having trouble figuring out how to animate a protovis streamgraph. I think the best way is to simply pass an array of i, j indexes to .layers() and have the .x() and .y() functions look up the actual updating values. Is there a simpler way?

Answer 1

Couldn t you just update the data before every render? Assuming that the data has changed, I m not sure I see the benefit to doing it otherwise, as I think the whole vis will need to re-render.

function getData(offset) {
   // get/create your data here, maybe seeded with an offset
}

var offset = 0;

// ... define scales and stuff

var vis = new pv.Panel()
    .width(w)
    .height(h);

vis.add(pv.Layout.Stack)
     // wrap in a function to re-evaluate on render
    .layers(function() getData(offset))
    .offset("wiggle")
    .x(x.by(pv.index))
    .y(y)
.layer.add(pv.Area);

// use setInterval to animate
setInterval(function() { 
    offset++; // still working on the offset idea
    vis.render(); 
}, 20);

This seems to work, though it really depends what kind of animation you re looking to create - there may be more efficient approaches for some kinds of animation.

友情链接