如何为protovis流图设置动画?

时间:2010-10-07 18:11:43

标签: javascript visualization protovis stream-graph

我无法弄清楚如何为protovis流图制作动画。我认为最好的方法是简单地将i, j索引数组传递给.layers(),并让.x().y()函数查找实际的更新值。有更简单的方法吗?

1 个答案:

答案 0 :(得分:2)

难道你不能在每次渲染之前更新数据吗?假设数据已经改变,我不确定我是否看到了这样做的好处,因为我认为整个vis都需要重新渲染。

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

这似乎有用,虽然它实际上取决于你想要创建什么样的动画 - 对于某些类型的动画可能有更有效的方法。