草庐IT

javascript - 平滑地动画化属性一次更改为 ~3000 个 Raphael 对象

coder 2025-03-03 原文

更新问题 我已经将其更新为更加简洁......:

在这个 fiddle 中:http://jsfiddle.net/pX2Xb/4/我有一些 raphael 代码可以在一页上绘制 3000 个圆圈。然后它会尝试在 10 秒内同时为所有圆圈设置动画(更改填充颜色)，这会导致视觉动画效果笨拙。将圆圈数更改为 20 以查看更流畅的动画以进行比较。

我的问题是 (a) 我是否可以使对 3000 个元素的更新更顺畅，以及 (b) 如果可以，执行此操作的代码是什么样的？

一些注意事项:

  • 如果有一些方法可以围绕这个进行优化，我愿意花一点时间，但是，例如，无论动画如何，我都希望所有圈子至少更新 1.5 倍时间设置为。所以，如果动画是 10 秒，所有圆圈应该在 15 秒内改变。
  • 目前 3000 个元素大致是我的极限，所以我很乐意为此工作 :) 也就是说，如果一个解决方案可以有效地处理更多的元素，对于一般情况，那真的是太好了。

旧的细节，以防有帮助

我正在创建一张美国县的大型 map ，其中有 3000 多个县；我正在使用 this Wikipedia svg file获取相关的 SVG 路径以创建 map ，并使用 RaphaelJs 渲染 map .

因此，我最终得到了 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 将更改分成更小的 block (可能一次 10 个，延迟 40 毫秒)。超过 3000 个项目，这变得相当慢，并且仍然使用大量 CPU。

谢谢， 油

最佳答案

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

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/

关于javascript - 平滑地动画化属性一次更改为 ~3000 个 Raphael 对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8239235/

地动javascriptcodesectionnoreferrersvgvisualizationraphael

有关javascript - 平滑地动画化属性一次更改为 ~3000 个 Raphael 对象的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby-on-rails - Ruby on Rails 迁移，将表更改为 MyISAM - 2

    如何正确创建Rails迁移，以便将表更改为MySQL中的MyISAM？目前是InnoDB。运行原始执行语句会更改表，但它不会更新db/schema.rb，因此当在测试环境中重新创建表时，它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移，以便将现有表修改为MyISAM并更新schema.rb，以便我的数据库和相应的测试数据库得到相应更新？ 最佳答案 我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb，然后运行:rakedb:schema:load，但是，这将覆盖您的数据。我的做法是(假设

  3. ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2

    在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev

  4. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  5. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  6. ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  7. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah

  8. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  9. Ruby 写入和读取对象到文件 - 2

    好的，所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象？所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是，我该如何再次将这个id变回一个对象？我知道我可以自己挑选信息并制作一个接受该信

  10. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

随机推荐