我正在尝试选择合适的技术来更新项目,该项目基本上可以在可缩放的可缩放图形中渲染数千个点。 使用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,应该更好地渲染动画。 但是,我怀疑它有多好,它的性能上限是多少。 出于这个原因,我还在考虑使用像KineticJS这样的基于画布的库进行更彻底的检修。 但是,在我使用一种或另一种方法之前,我希望听到那些使用这么多数据做过类似Web应用程序并得到他们意见的人。
最重要的是性能,第二个重点是易于添加其他交互功能和编程动画。 一次可能不会超过2000个点,每个点上的误差小。 放大,缩小和平移需要顺利进行。 如果最新的SVG库在这方面还不错,那么使用d3的方便性可能会超过KineticJS的增加设置等。但是如果使用画布有巨大的性能优势,特别是对于计算机速度较慢的人来说,那么我 肯定会喜欢这样。
使用SVG的NYTimes制作的应用程序示例,但仍然可以顺利地动画:[http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html]。 如果我可以获得该性能而不必编写自己的画布绘图代码,我可能会选择SVG。
我注意到一些用户使用了混合的d3.js操作和画布渲染。 但是,我无法在线找到有关此内容的文档或与该帖子的OP联系。 如果有人有任何使用DOM-to-Canvas(演示,代码)实现的经验,我也想听听你的意见。 它似乎是一个很好的混合体,能够操纵数据并对如何渲染数据进行自定义控制(以及性能),但我想知道是否必须将所有内容加载到DOM中仍然会减慢速度。
我知道有一些类似于这个问题的现有问题,但它们都没有提出同样的问题。 谢谢你的帮助。
后续行动:我最终使用的实现是[https://github.com/zooniverse/LightCurves]