代码之家  ›  专栏  ›  技术社区  ›  joeforker

如何设置protovis流图的动画?

  •  3
  • joeforker  · 技术社区  · 15 年前

    我搞不清楚如何制作protovis流图的动画。我认为最好的方法就是通过一系列的 i, j 索引到 .layers() 还有 .x() .y() 函数查找实际的更新值。有没有更简单的方法?

    1 回复  |  直到 12 年前
        1
  •  2
  •   nrabinowitz    15 年前

    你不能在每次渲染之前更新数据吗?假设数据发生了变化,我不确定我是否看到这样做的好处,因为我认为整个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);
    

    这似乎是可行的,尽管这实际上取决于你想要创建什么样的动画——对于某些类型的动画,可能有更有效的方法。

    推荐文章