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

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

解决方法

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

> 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。

html5 – 快速,灵敏的交互式图表/图形:SVG,Canvas,其他?的更多相关文章

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  6. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  8. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

  10. HTML实现代码雨源码及效果示例

    这篇文章主要介绍了HTML实现代码雨源码及效果示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部