平滑动画属性一次更改为~3000 Raphael对象

Question

更新的问题 我已将此更新为更简洁..:

在这个小提琴:http://jsfiddle.net/pX2Xb/4/我有一些raphael代码,可以在页面上绘制3000个圆圈.然后它会尝试在10秒内一次动画所有圆圈(更改填充颜色),这会产生笨重的视觉动画.将圆圈数更改为20以查看更平滑的动画以进行比较.

我的问题是(a)我是否有可能使3000个元素的更新更顺畅;(b)如果是这样,那么代码看起来是什么样的？

一些说明:

• 如果有一些优化方法,我愿意采取一些小的时间点击,但是,例如,我希望所有圈子至少在1.5倍更新,无论动画时间设置如何.因此,如果动画为10秒,则所有圆圈应在15中更改.
• 目前3000个元素大致是我的极限,所以我很乐意为它工作:)在说,如果一个解决方案可以有效地处理更多,对于一般情况,这真的很棒.

较旧的细节,以防万一

我正在创建一个美国县的大型地图,其中有超过3000个; 我正在使用这个维基百科svg文件获取相关的SVG路径来创建地图,并使用RaphaelJs渲染地图.

因此,我最终得到了超过3000条类似于以下内容的陈述:

    var cc_02130 = rsr.path("M 140.66674,.... 320.11635"); // county path
    cc_02130.attr({id: '02130',.. .."marker-start": 'none'}); // init attrs

我也创建了一个Paper.set()对象来保存所有这些元素:

var myset = paper.set([cc_56039, cc_56040, cc_56041 ...])

忘记这里实际生成的文件非常大,我非常感谢有关如何对上面详述的对象量进行更改的建议,这是快速且合理的CPU明智(可能是一个很大的问题).

我肯定愿意改变我的代码/对象的结构,只要我可以单独更改特定县的属性.例如,我希望能够在一秒钟或两秒内为每个路径内容应用不同的颜色(对于所有3000+).

我面临的挑战不是如何应用颜色变化,动画等,而是如何快速有效地完成这项工作.现在,如果我循环并对3000多个对象进行更改,我的机器会对我尖叫; 作为替代方案,我正在使用setTimeout将更改分解为更小的块(可能一次只有10个,延迟40毫秒).超过3000项,这变得非常慢,仍然使用了大量的CPU.

谢谢,奥利

Answer 1

我不知道为什么,但是当同时动画大量元素时,D3.js更有效率.您可以通过创建一个接收集合并返回要设置动画的html对象的Raphael函数,使它们无缝地工作:

Raphael.st.nodes = function() {
  var elements = [];
  this.forEach(function (i) {
     elements.push(i.node);
  });
  return elements;
}

然后你让d3从那里拿走它

//circleholder is a Raphael set
elements = circleholder.nodes()
d3.selectAll(elements)
  .transition()
  .attr("fill", function(d,i){return colours[randomNum(14)]})
  .duration(ANIMATION_DELAY)

这是jsfiddle:http://jsfiddle.net/mFecs/