D3 v3 使用鼠标右键而不是左键的缩放/拖动性能更好？

Question

我有一个基于 D3 v3 的图表，它使用内置的缩放行为来处理拖动平移功能。 zoom 处理程序使用 requestAnimationFrame 进行更新，比每次平移操作都调用 update 更顺畅。

当我开始在图表中使用大量数据时，我注意到使用鼠标右键而不是鼠标左键在拖动期间的更新性能明显更好。在深入研究了 Chrome DevTools 之后，我发现这两种操作之间有一个非常奇怪的区别。

这是向右拖动以平移图表时时间线视图的一部分。

这就是我希望时间线的样子，帧更新相对规律，并且被尽可能快地调用。更新约 25 毫秒，重绘约 60 毫秒。每帧总共约 85 毫秒。

这是离开时在同一张图表中具有完全相同数据的时间线 拖动。

正如您所见，每一帧都需要更多的时间（约 175 毫秒），从一帧更新结束到下一帧开始之间存在巨大的时间间隔。时间线上没有可见的处理，只有selectstart事件处理器的几个实例（不是我加的，好像是D3），最多耗时0.23ms。

我已经删除了图表上可以找到的所有其他事件处理程序，但没有任何效果

我之前看到Chrome在拖拽操作过程中对一些处理做了一些优化，也看到了那段时间HTTP流量的下降，但是纯粹的客户端更新没有。

这是一个已知问题吗？ D3 对左拖动有什么特别的作用吗？有人见过这个吗？

Answer 1

有一个默认处理程序会影响您的时间安排和性能。

调用 preventDefault() 来禁用它。