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

Question

I have a D3 v3 based chart, using the built in Zoom behaviour to handle the drag pan functionality. The zoom handler is using requestAnimationFrame to update more smoothly than just calling update every pan operation.

When I started using a lot of data in my chart, I noticed that the performance of the update during drag was significantly better using the right mouse button rather than the left. After some digging into the Chrome DevTools I'm finding a very strange difference between the two operations.

This is a chunk of the timeline view when right dragging to pan the chart.

This is what I would expect the timeline to look like, the frame update being relatively regular and being called as fast as they can be. ~25ms for the update, ~60ms for the repaint. ~85ms total per frame.

This is the timeline with exactly the same data in the same chart when left dragging.

As you can see each frame is taking significantly more time (~175ms), with huge time gaps between the end of one frame update and the start of the next. There is no visible processing in the timeline, only a few instances of a selectstart event handler (that is not added by me, seems to be D3), which take at most 0.23ms.

I have removed every other event handler I can find on the chart, with no effect

I have seen before that Chrome does some optimisation of some processing during dragging operations, and have seen the slowdown in the rate of HTTP traffic during that time, but nothing on pure client side updating.

Is this a known issue? Does D3 do something special for left drags? Has anyone seen this before?

Answer 1

There's a default handler that is impacting your timings and performance.

Call preventDefault() to disable it.