d3.js - 使用canvas保持交互

Question

据我读到这个主题，d3.js用于主要部分SVG，而不是HTML5的Canvas。 SVG和Canvas的优缺点很明显，已经讨论过了。现在我发现可以在d3.js中使用Canvas或与SVG结合使用。主要原因应该是为大型数据集获得更好的性能（例如cubism.js用于实时数据可视化）。我的问题是：当我使用Canvas而不是SVG来获得更好的性能时，我是否还有交互的可能性？我知道Canvas本身允许操作，但它实现起来比SVG要难得多。因此，当我使用d3.js Canvas方法时，我可以保持SVG的交互吗？

Answer 1

首先，D3不需要任何特定的渲染技术。主要是（除了一些专门的帮助者）不知道你是否使用HTML，SVG，Canvas或者完全不同的东西进行渲染。

正如您所指出的，SVG和Canvas之间的主要区别之一是SVG具有“内置”的交互，即它为事件监听器等提供了便利。 Canvas没有这个。

然而，您可以在Canvas中获得与SVG中相同的交互性。诀窍是使用Javascript来监视用户对各种元素的处理。有关此介绍，请参阅例如here

请注意，根据您想要的交互类型，可能需要进行大量实施，以实现与SVG已提供的相同的实现。另请注意，这会导致性能下降，这可能会抵消Canvas相对于SVG的一些好处。