D3 v3 zoom/drag 鼠标右键比左键性能更好?

D3 v3 zoom/drag performance better with right mouse rather than left?

我有一个基于 D3 v3 的图表,使用内置的缩放行为来处理拖动平移功能。 zoom 处理程序正在使用 requestAnimationFrame 进行更新,而不是仅在每次平移操作时调用更新。

当我开始在我的图表中使用大量数据时,我注意到使用鼠标右键而不是左键拖动期间的更新性能要好得多。在深入研究 Chrome DevTools 之后,我发现这两种操作之间存在非常奇怪的差异。

这是右键拖动以平移图表时的时间线视图块。

这就是我期望的时间线样子,帧更新相对有规律并且被尽可能快地调用。 ~25ms 用于更新,~60ms 用于重绘。每帧总计约 85 毫秒。

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

如您所见,每一帧都花费了更多时间(~175 毫秒),一帧更新结束与下一帧开始之间存在巨大的时间间隔。时间线上看不到任何处理,只有几个selectstart事件处理程序的实例(不是我添加的,好像是D3),最多需要0.23ms。

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

我之前看到Chrome在拖动操作的过程中做了一些优化,并且看到了那段时间HTTP流量的速度变慢,但是没有纯客户端更新。

这是一个已知问题吗? D3 是否为向左拖动做了一些特别的事情?有人以前看过这个吗?

有一个默认处理程序正在影响您的时间和性能。

调用 preventDefault() 来禁用它。