简单任务（SVG vs. Canvas）

Question

我只想制作200个可通过线连接的可点击节点（捕获鼠标事件）。 每个节点都有一些与实时数据流形式相关的数据（为简单起见，假设为CSV），点击节点会显示绘制在图表中的值。

• 所有这些节点和行所在的区域应该是可缩放的。

即使经过谷歌搜索，我也很困惑，因为这个SVG更适合或Canvas。 此外，哪些图书馆最适合此目的。和Canvas一样，我们有KineticJS（带有HTML5），对于SVG，我们有d3和所有。

专家，请提出建议。非常感谢提前。

Answer 1

SVG对此更好。 Canvas没有鼠标事件，您可以使用拾取技术。

Answer 2

这取决于。如果您有与每个节点关联的复杂视觉效果，如果您将节点栅格化一次，然后在画布上克隆和绘制而不是使用SVG，则它将更快地工作。例如，它可以使用Paper.js完成（并且它对鼠标事件有一些支持）。如果您的节点很简单，比如简单的矩形或其他东西，您可以使用SVG。有些浏览器使用SVG比其他浏览器更有效。例如，IE9具有非常有效的SVG支持，因此如果您针对特定浏览器，请首先查看它的SVG绘制速度。
顺便说一下，如果你想旋转，缩放，移动物体和物体组等，Paper.js特别有用。它对此有很好的支持。