http://www.planethunters.org/classify
完全缩小时有约2000点。尝试使用底部的手柄放大一点，拖动它来平移。你会看到它是相当浪潮，你的cpu使用率可能在一个核心上升到100％，除非你有一个真正快速的计算机。对焦点区域的每次改变都调用了重绘到protovis，这是非常缓慢，更糟糕的是绘制更多的点。
我想对界面做一些更新，以及改变底层的可视化技术，以更加灵敏的动画和互动。从下面的文章，似乎是选择在另一个基于SVG的库之间，或基于画布的：
http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/
d3.js，从Protovis生长，是SVG为基础，是supposed to be better at rendering animations.但是，我怀疑，多少更好，它的性能上限是什么。因此，我还在考虑使用基于画布的库(如KineticJS)进行更彻底的翻修。然而，在我使用一种方法或另一种方法之前，我想听到一个做过类似网络的人应用这么多的数据，并得到他们的意见。
最重要的是性能，第二个重点是轻松添加其他交互功能和编程动画。一次可能不会有超过2000个点，每个点上都有小的误差棒。放大，缩小和平移需要平滑。如果最新的SVG库在这方面体面的话，那么也许使用d3的容易性将超过KineticJS的增加的设置等。但是如果使用画布有巨大的性能优势，特别是对于较慢的计算机的人，肯定会喜欢这样。
由NYTimes制作的应用程序示例使用SVG，但仍然动画接受顺利：
http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html。如果我可以得到那个性能，而不必编写自己的画布代码，我可能去SVG。
我注意到一些用户使用的混合型d3.js manipulation combined with canvas rendering.但是，我找不到在线的很多文档或与该帖子的OP联系。如果任何人有任何经验做这种DOM到画布(demo，code)实现，我也想听到你的意见。它似乎是一个很好的混合，能够操纵数据和自定义控制如何渲染(因此性能)，但我想知道是否必须加载到DOM仍然会减慢的事情。
我知道有一些现有的问题，类似于这一个，但没有人确切地问同样的事情。谢谢你的帮助。
后续：我最后使用的实现是在https://github.com/zooniverse/LightCurves
解决方法
> Canvas geometric zooming
> Canvas semantic zooming
> SVG geometric zooming
> SVG semantic zooming
这些示例使用D3的zoom behavior实现缩放和平移。除了圆形是在Canvas还是SVG中渲染，另一个主要区别是是否使用几何或语义缩放。
几何缩放意味着对整个视口应用单个变换：放大时，圆圈变大。对比的语义放大意味着您单独对每个圆应用变换：放大时，圆形保持相同的大小，但它们展开。 Planethunters.org当前使用语义缩放，但它可能有用的考虑其他情况。
几何缩放简化了实现：您应用一次平移和缩放，然后重新渲染所有圆。 SVG实现特别简单，更新单个“transform”属性。两个几何缩放示例的性能感觉足够。对于语义缩放，您会注意到D3比Protovis显着更快。这是因为它为每个缩放事件做了很少的工作。 (Protovis版本必须重新计算所有元素的所有属性。)基于Canvas的语义缩放比SVG更加拉链，但SVG语义缩放仍然感觉响应。
然而，没有什么神奇的性能表现，这四种可能的方法并没有开始覆盖可能性的全部空间。例如，您可以组合几何和语义缩放，使用几何方法进行平移(更新“transform”属性)，并且只在缩放时重绘单个圆。你可能甚至可以组合一个或多个这些技术与CSS3变换来添加一些硬件加速(如在hierarchical edge bundling example)，虽然这可能是棘手的实现和可能引入视觉工件。
不过，我个人的偏好是尽可能多地在SVG中使用，当渲染是瓶颈时，使用Canvas仅用于“内循环”。 SVG有很多方便开发 – 例如CSS，数据连接和元素检查器 – 它通常是从Canvas开始的过早优化。将Canvas与SVG结合使用，如在您链接的Facebook IPO可视化中，是一种灵活的方式来保留大多数这些便利，同时仍然保持最佳性能。我也在Cubism.js中使用了这种技术，其中时间序列可视化的特殊情况适用于位图缓存。
如这些示例所示，您可以使用D3与Canvas，即使D3的部分是SVG特定的。参见这force-directed graph和这collision detection example。
原文地址：https://www.jb51.cc/html5/170317.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
