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。