I have got a d3 example where panning on the x axis results in accelerated panning. That is, when I hold the left button down and move the pointer, the data pans in a non-linear way. This is probably best illustrated in an example, see:
https://bl.ocks.org/sachams/d8621093ebb8181d50fe
I read some posts which suggested the problem is that I had attached the zoomer to the same element I was capturing mouse input with, and that I had to place an extra between them (d3.behavior.zoom jitters, shakes, jumps, and bounces when dragging).
I have tried all sorts of combinations of adding different child elements and attaching my zoomer to different places, but can't find one that works.
Any suggestions?
The problem is that in your zom handler function (update()
) you're resetting the domain of the x scale:
x.domain(scope.range);
// ...
Zoomer.x(x) // update the zooming behavior to match the domain
The first line is what causes the jittering. Before calling this code, you've set scope.range
to x.domain()
in the function called directly by the zoom behaviour, so this is unnecessary. The second line isn't necessary either as you've already told the zoom behaviour to "track" the x
scale, but doesn't do any harm in this case.