Javascript 简单任务（SVG与画布）

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

• 所有这些节点和线所在的区域应该可以缩放

即使在谷歌搜索了很多次之后，我还是对一些简单的东西感到困惑，比如SVG更适合还是画布。 此外，什么样的图书馆最适合这个目的。像Canvas一样，我们有KineticJS（带有HTML5），SVG有d3等等

---

请专家们提出建议。先谢谢你

SVG是更好的选择。

---

画布没有鼠标事件，您应该使用拾取技术。

视情况而定。如果您有与每个节点相关联的复杂视觉效果，那么如果您将一个节点光栅化一次，然后克隆并在画布上绘制，而不是使用SVG，则工作速度会快得多。例如，可以使用（并且它对鼠标事件有一些支持）。如果您的节点很简单，比如说简单的矩形或其他什么，那么可以使用SVG。一些浏览器使用SVG比其他浏览器更高效。例如，IE9具有非常高效的SVG支持，所以如果您针对特定的浏览器，请首先查看它的SVG绘制速度。

---

顺便说一句，如果你想旋转、缩放、移动对象和对象组等，Paper.js特别有用。它对此有很好的支持。

谢谢你的回复。但是使用KinectJs，我可以很容易地将鼠标事件关联起来，这增加了混乱。这是一个效果和强度有多大的问题。SVG是“dom”，它确实很容易使用，但对于任何紧张的事情来说，它的性能都远不及画布。但是SVG的性能相当好。我想要SVG，视网膜屏幕。不不。。我的节点只是简单的正方形。点击这些方块，相应的绘图开始出现在屏幕的左上角。就是这样。所以，本质上我只想关联鼠标事件。（左键单击……这些节点的鼠标）+在整个空白区域滚动，不需要放大/缩小整个事物。好的，有2个选项——SVG使用像你提到的D3或RAPHA L的库，或者你可以使用Pr.js来实现与画布几乎相同的功能。为SVG处理鼠标事件更容易，但您也可以在Paper.js中这样做。对于简单节点，两种选择都是相似的。非常感谢Vladich。我还计划稍后在节点周围绘制一些轮廓。。这项功能是否比其他功能更适合SVG/Canvas？你用过KineticJS吗。。对此有何看法。。这可以用Dojo来完成吗。。很抱歉在OneJ中问了太多问题，我从未使用过KineticJS。它看起来非常类似于Paper.js，只是画布的另一个向量库，所以它可能对您的任务很有用。在200个节点的情况下，它应该比SVG绘图更快。如果希望以后使节点更复杂或创建更多节点，那么Canvas和SVG之间的性能差异将更加明显。