0

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?

Community
  • 1
  • 1
sachams
  • 33
  • 5
  • It looks like the problem is that you're resetting the x domain for the zoom behaviour in your zoom handler. You shouldn't need to do that, as you've already "attached" the x scale to the zoom behaviour. – Lars Kotthoff Jan 29 '15 at 11:46
  • That was it - thanks!! I made the zoom handler call the following function and that fixed it: `function updateZoom(){ xAxisG.call(xAxis); yAxisG.call(yAxis); xGridG.call(xGrid); yGridG.call(yGrid); // Add the line path.datum(scope.data).attr('d', line); }` – sachams Feb 04 '15 at 22:12

1 Answers1

0

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.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204