【问题标题】：d3.js - maintain interaction with use of canvasd3.js - 使用画布保持交互
【发布时间】：2014-03-13 18:25:29
【问题描述】：
据我了解，d3.js 主要用于 SVG 而不是 HTML5 的 Canvas。 SVG 和 Canvas 的优缺点很清楚，并且已经讨论过了。现在我发现可以在 d3.js 中使用 Canvas 代替或与 SVG 结合使用。主要原因应该是为大型数据集获得更好的性能（就像 cubism.js 对实时数据可视化所做的那样）。我的问题是：当我使用 Canvas over SVG 来获得更好的性能时，我还有交互的可能性吗？我知道 Canvas 本身允许操作，但它比 SVG 更难实现。那么我在使用 d3.js Canvas 方法时是否可以保持 SVG 的交互？
【问题讨论】：
标签：
javascript
canvas
svg
d3.js
【解决方案1】：
首先，D3 本身不需要任何特定的渲染技术。它主要（除了一些专门的帮助程序）不知道您是使用 HTML、SVG、Canvas 还是完全不同的东西进行渲染。
正如您所指出的，SVG 和 Canvas 之间的主要区别之一是 SVG 具有“内置”交互功能，即它为事件侦听器等提供了便利。 Canvas 没有这些。
但是，您可以在 Canvas 中获得与 SVG 相同的交互性。诀窍是使用 Javascript 来监控用户对各种元素的操作。有关这方面的介绍，请参见例如here.
请注意，根据您确切想要的交互类型，可能需要大量的实施工作才能实现 SVG 已经提供的相同功能。另请注意，这会导致性能损失，这可能会抵消 Canvas 优于 SVG 的一些优势。