d3.js - 保持與使用畫布的交互

Question

據我讀到關於這個主題d3.js用於主要部分SVG而不是HTML5的畫布。 SVG和Canvas的優點和缺點都很清楚，並且已經討論過了。現在我發現在d3.js中可以使用Canvas或與SVG結合使用。主要原因應該是爲大數據集獲得更好的性能（比如cubism.js用於實時數據可視化）。我的問題是：當我使用Canvas over SVG獲得更好的性能時，我仍然有交互的可能性嗎？我知道Canvas本身允許操作，但實現比SVG要困難得多。那麼當我使用d3.js Canvas方法時，我可以保持SVG的交互嗎？

Answer 1

首先，D3不需要任何特定的渲染技術。它主要是（除了一些專門的幫助者）不知道你是否使用HTML，SVG，Canvas或完全不同的渲染。

正如您所指出的，SVG和Canvas之間的主要區別之一是SVG具有「內置」交互功能，即它爲事件監聽器等提供了工具。帆布沒有這個。

然而，您可以獲得與在Canvas中SVG相同的交互性。訣竅是使用Javascript來監控用戶在各種元素方面的表現。有關這方面的介紹，請參閱here。

請注意，根據您想要的準確交互類型，可能需要付出相當大的實現努力才能實現與SVG已提供的相同的效果。另外請注意，這會導致性能損失，這可能會否定Canvas對SVG的一些好處。