快速响应的交互式图表/图形：SVG，画布，其他？快速响应的交互式图表/图形：SVG，画布，其他？(F

我想选择合适的技术用于更新项目，基本上呈现千点的可缩放，可平移图。当前实现，使用Protovis，是underperformant。看看这里：

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，但仍是纽约时报由应用程序的实施例的动画可接受顺利： 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

Answer 1:

幸运的是，拉丝2000圈是一个很简单的例子来测试。因此，这里有四种可能的实现，每两个Canvas和SVG的：

帆布几何缩放
帆布语义缩放
SVG几何缩放
SVG语义缩放

这些示例使用D3的缩放行为来实现缩放和平移。除了是否圆圈在画布或SVG渲染，其他主要区别是是否使用几何或语义缩放。

几何变焦意味着你将单个变换到整个视口：当你放大，圈变得更大。相比之下语义缩放意味着你应用转换到每个单独的循环：当你放大，圆圈保持相同的大小，但他们传播出去。 Planethunters.org目前使用语义缩放，但它可能会考虑其他情况下非常有用。

几何缩放简化了实现：您应用转换和调整一次，然后所有的圈子都重新呈现。的SVG实现是特别简单的，更新一个单一的“变换”属性。两个几何变焦例子表现感到绰绰有余。对于语义缩放，你会发现，D3比Protovis显著快。这是因为它做的少了很多工作，为每个缩放事件。（该Protovis版本必须重新计算所有元素的所有属性。）基于帆布语义缩放的功能要比SVG更活泼，但SVG语义缩放仍然感觉响应。

然而，没有灵丹妙药性能，而这些四种可能的方法不开始覆盖的可能性充分的空间。 例如，您可以结合几何和语义缩放，用几何方法进行平（更新“改造”属性），只有个别重绘圈，而缩放。你也许甚至结合的一种或多种，这些技术与CSS3转换添加一些硬件加速（如分层边缘捆绑例子），虽然这可能会非常棘手实现和可能引入视觉假象。

不过，我个人的偏好是让尽可能多的在SVG成为可能，并用帆布只为“内循环”的渲染是瓶颈时 。 SVG具有很大的发展，如CSS这么多的便利，数据连接和元素督察，这往往是过早的优化开始与帆布。结合帆布与SVG，如您链接Facebook的IPO可视化，是保留了大部分这些便利的同时仍然芯吸出最佳性能的灵活方式。我也是采用的这种技术Cubism.js ，在时间序列可视化的特殊情况，很适合位图缓存。

由于这些例子表明，你可以使用D3与帆布，即使D3的部分是SVG特定的。还看到此力向图，该碰撞检测示例。

Answer 2:

我认为， 你的情况画布和SVG之间的决策是不喜欢骑着马«或驾驶»保时捷«»之间做出一个决定。对我来说，它更像是对汽车颜色的决定。

让我来解释一下：假设，基于框架的操作

画一个明星，
添加一个明星，
卸下明星

采取线性时间。所以，如果你的框架的决定是好是快一点，不然有点慢。

如果你去假设框架仅仅是速度快，比它变得完全明显，性能上的不足，在导致恒星的高量和处理这些问题是没有一个框架的东西能为你做什么，至少我不知道对这个。

我想说的是，这个问题的基础导致计算几何，即一个基本问题：范围搜索和计算机图形另一个问题：详细程度。

为了解决性能问题，您需要实现一个良好的预处理器，它能够找到非常快的其中星级显示和或许能够星团其并拢，根据变焦。，让您的观点鲜明，快速的唯一的事情就是保持数星星，以尽可能低借鉴。

正如你所说的那样，最重要的是性能，比我会倾向于使用画布，因为它的工作原理没有DOM操作。它还提供了使用WebGL的，有什么提高图形性能提升不少的机会。

BTW：你检查paper.js ？它采用帆布，但模仿的矢量图形。

PS：在这本书中，你可以找到有关图形在网络上，在技术，利弊帆布，SVG和DHTML的一个非常详细的讨论。

Answer 3:

我最近在弄一个近实时仪表板（刷新每5秒），并选择使用该渲染器使用帆布图表。

我们试图Highcharts（SVG基于JavaScript的图表库）和CanvasJS（帆布基于JavaScript的图表库）。虽然Highcharts是一个梦幻般的绘图API，提供的方式更多的功能，我们决定使用CanvasJS。

我们需要显示每个图表至少15分钟数据的（可选择挑最大两个小时范围内）。

这样进行15分钟：900分（每第二个数据点）×2（行和杆组合图）X4图表=总7200点。

使用Chrome探查，与CanvasJS内存不会超过30MB去，同时用Highcharts内存使用率超过600MB。

此外，拥有5秒CanvasJS渲染的刷新时间分配更加敏感，然后Highcharts。

我们使用一个定时器（setInterval的5秒），使4 REST API调用来从连接到Elasticsearch后端服务器拉取数据。更新数据的每个图表由JQuery.post接收（）。

这就是说用于脱机报告我会去Highcharts自其更灵活的API。

还有ZING图表号称为使用SVG和画布，但没有看过他们。

当性能是真正的关键画布应予以考虑。 SVG的灵活性。这并不是说帆布框架不灵活，但需要配发的帆布框架，更多的工作来获得相同的功能的SVG框架。

Answer 4:

也可能会考虑流星图表，这是建立在尤伯杯快速KineticJS框架之上： http://meteorcharts.com/

文章来源: Fast and responsive interactive charts/graphs: SVG, Canvas, other?