快速响应的交互式图表/图形:SVG,Canvas,其他?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (27)

我正在尝试选择正确的技术用于更新基本呈现可缩放,可移动图形中数千个点的项目。目前使用Protovis的实施效果不佳。看看这里:

http://www.planethunters.org/classify

完全缩小时大约有2000点。尝试使用底部的手柄放大一点,然后拖动它平移。你会发现它非常波涛汹涌,你的CPU使用率可能会在一个内核上达到100%,除非你有一台非常快的计算机。对焦点区域的每次更改都会调用protovis进行重绘,这相当慢,并且在绘制更多点时会变得更糟。

我想对接口进行一些更新,并将底层的可视化技术更改为对动画和交互更加敏感。从下面的文章中,似乎可以选择另一种基于SVG的库或基于画布的库:

http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/

从Protovis发展而来的d3.js是基于SVG的,并且在渲染动画方面应该会更好。不过,我很怀疑它有多好,以及它的性能上限是多少。出于这个原因,我还在考虑使用像KineticJS这样基于画布的库进行更彻底的检修。然而,在我使用这种或那种方法过度使用之前,我想听听有人用这么多数据完成了一个类似的Web应用程序,并得到他们的意见。

最重要的是性能,次要的重点是易于添加其他交互功能和编程动画。一次可能不会超过2000点,每个点上都有小小的误差线。放大,缩小和平移需要平滑。如果最近的SVG库在这方面比较体面,那么使用d3的难易程度可能会超过KineticJS的增加设置等。但是如果使用画布具有巨大的性能优势,尤其是对于电脑速度较慢的用户,那么我肯定会喜欢这样。

使用SVG的NYTime制作的应用程序示例,但仍可以流畅地呈现动画效果:http ://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html 。如果我能够获得这样的性能,而不必编写自己的画布绘制代码,那么我可能会选择SVG。

我注意到有些用户使用了混合的d3.js操作和画布渲染。但是,我无法在网上找到很多关于这个帖子的文档,或者与该帖子的OP联系。如果任何人有任何这样的DOM到画布(演示代码)实现的经验,我想也听到你的消息。它似乎是一个能够操纵数据和自定义控制如何呈现它(以及因此表现)的良好混合体,但是我想知道是否必须将所有东西加载到DOM中仍然会减慢速度。

我知道有一些类似于这个问题的现有问题,但他们中的任何一个都没有问过同样的问题。谢谢你的帮助。

后续:我最终使用的实现是在https://github.com/zooniverse/LightCurves

提问于
用户回答回答于

幸运的是,绘制2000圈是一个很容易测试的例子。所以这里有四种可能的实现,Canvas和SVG各有两种:

这些示例使用D3的缩放行为来实现缩放和平移。除了圆圈是以“画布”还是“SVG”呈现之外,其他主要区别在于您是使用几何缩放还是语义缩放。

几何缩放意味着您对整个视口应用单个转换:放大时,圆圈变大。对比度的语义缩放意味着您可以将变换单独应用于每个圆圈:放大时,圆圈保持相同的大小,但展开。Planethunters.org目前使用语义缩放,但考虑其他情况可能会有用。

几何缩放简化了实现:您应用翻译和缩放一次,然后重新渲染所有的圆圈。SVG实现非常简单,只需更新一个“transform”属性即可。这两个几何缩放例子的性能感觉绰绰有余。对于语义缩放,您会注意到D3比Protovis快得多。这是因为它为每个缩放事件做了很少的工作。(Protovis版本必须重新计算所有元素的所有属性。)基于画布的语义缩放比SVG更加快捷,但SVG语义缩放仍然感觉响应。

然而,没有什么神奇的表现力,而这四种可能的方法并没有开始覆盖整个可能性空间。例如,您可以结合几何和语义缩放,使用几何方法进行平移(更新“transform”属性),并在缩放时仅重绘各个圆圈。您甚至可以将这些技术中的一种或多种与CSS3转换组合起来,以添加一些硬件加速(如分层边缘绑定示例中所示),尽管实施起来可能会很棘手,并且可能会引入视觉工件。

尽管如此,我的个人偏好是尽可能多地使用SVG,并且在渲染成为瓶颈时仅将Canvas用于“内部循环”。SVG为开发提供了许多便利(如CSS,数据连接和元素检查器),因此从Canvas开始往往是不成熟的优化。将Canvas与SVG相结合,就像您链接的Facebook IPO可视化一样,这是一种灵活的方式,可以保留大部分这些便利性,同时还能获得最佳性能。我还在Cubism.js中使用了这种技术,其中时间序列可视化的特殊情况非常适合位图缓存。

正如这些示例所示,即使D3的一部分是SVG特定的,也可以使用D3和Canvas。另请参阅这个强制导向图和这个碰撞检测示例

用户回答回答于

我认为在你的情况下,画布和svg之间的决定不像是“骑马”或驾驶“保时捷”之间的决定。对我而言,这更像是关于汽车颜色的决定。

让我解释一下:假设,基于框架的操作

  • 画一颗星,
  • 添加一颗星星
  • 删除一颗星

采取线性时间。所以,如果你的框架决定是好的,它会快一点,否则会慢一点。

如果你继续假设框架是快速的,那么完全明显的是,性能不足的原因是大量的明星和处理它们是没有框架可以为你做的事情,至少我不知道对这个。

我想说的是,问题的基础导致了计算几何的基本问题,即:范围搜索和另一种计算机图形:细节层次

为了解决你的性能问题,你需要实现一个好的预处理器,它能够非常快速地找到要显示的星星,并且可能能够将靠近在一起的星星聚集在一起,具体取决于变焦。唯一让你的观点更加生动和快速的方法是保持尽可能低的恒星数量。

正如你所说,最重要的是性能,比我倾向于使用画布,因为它没有DOM操作。它还提供了使用webGL的机会,这很大程度上提高了图形性能。

顺便说一句:你检查paper.js?它使用画布,但模拟矢量图形。

扫码关注云+社区