5
快速响应的交互式图表/图形：SVG，画布，其他？
我正在尝试选择用于更新项目的正确技术，该项目基本上在可缩放，可平移的图形中呈现数千个点。使用Protovis的当前实施效果不佳。在这里查看： http://www.planethunters.org/classify 完全缩小时大约有2000点。尝试使用底部的手柄放大一点，然后拖动以平移。您会发现它非常不稳定，除非您有一台非常快的计算机，否则您在一个内核上的CPU使用率可能会高达100％。对焦点区域的每次更改都需要重绘到原图，这相当慢，而且绘制的点数更多时更糟。 我想对界面进行一些更新，并更改底层的可视化技术，以更好地响应动画和交互。从下面的文章来看，似乎是在另一个基于SVG的库还是一个基于画布的库之间进行选择： http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/ d3.js源自Protovis，它是基于SVG的，被认为在渲染动画方面更好。但是，我对性能有多好以及性能上限有疑问。因此，我也在考虑使用基于画布的库（例如KineticJS）进行更全面的大修。但是，在我深入研究一种或另一种方法之前，我想听听有人用如此大量的数据完成了类似的Web应用程序，并征求了他们的意见。 最重要的是性能，其次是增加其他交互功能和对动画进行编程的重点。一次最多可能不会超过2000个点，每个点上都有很小的误差线。放大，缩小和平移需要平滑。如果最新的SVG库在这方面是不错的，那么使用d3的便利性可能会超过KineticJS等的增加的设置。但是，如果使用canvas具有巨大的性能优势，尤其是对于计算机速度较慢的人，那么我绝对会喜欢这样。 NYTimes使用SVG制作的应用示例，但仍可以流畅地进行动画设置：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