javascript - 简单的任务（SVG 与 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 特别有用。它对此有很好的支持。