Make scrollZoom speed configurable

[rreusser]

I find scrollZoom speed painfully slow. Making this configurable may mean propagating a scale factor to some other gl modules or something, but then again it might just be a simple scalar. Maybe scrollZoomSpeed?

(Side note: it's not clear to me why scrollZoom is camelCased and belongs to config instead of to layout.)

I don't think it's entirely straightforward to get the speed itself just right across browsers and system configs, but maybe this is something: http://stackoverflow.com/questions/5527601/normalizing-mousewheel-speed-across-browsers#answer-30134826

[etpinard]

cc #2041

[mzechmeister]

Is there are progress here?
Can't see a quick way to adjust the zoom speed for the mouse wheel. It is really slow.

[mzechmeister]

As a quick hack one can adjust manually the hardcoded normalisation factor in
plotly.min.js:

var r=-e.deltaY;if(isFinite(r)||(r=e.wheelDelta/10),isFinite(r)){var n,i=Math.exp(-Math.min(Math.max(r,-20),20)/200),...

I replaced /200 by /10.

[mitja-p]

If using in Javascript, I solved this by overtaking the wheel event (capture phase) and emitted my own event with modified deltaY. This works on cartesian plots, I did not check others.

function handler(event)
{
      if (!event.isTrusted) return;
      event.stopPropagation();
      var newEv = new WheelEvent('wheel', {
        clientX: event.clientX,
        clientY:event.clientY, 
        deltaY:event.deltaY*2,
      });
      event.target.dispatchEvent(newEv);
}

[danielfrunza]

If using in Javascript, I solved this by overtaking the wheel event (capture phase) and emitted my own event with modified deltaY. This works on cartesian plots, I did not check others.

function handler(event)
{
      if (!event.isTrusted) return;
      event.stopPropagation();
      var newEv = new WheelEvent('wheel', {
        clientX: event.clientX,
        clientY:event.clientY, 
        deltaY:event.deltaY*2,
      });
      event.target.dispatchEvent(newEv);
}

What is the element that you attached the 'handler'? I tried on 'document' and plot element and does not work....

[mitja-p]

I attached it to plot element but on wheel event in capture mode.

[danielfrunza]

Thank you! I've missed the 'capture mode' from the initial post. Now it worked.

[caotoulei]

What's the 'capture mode' you guys talking about? Could you share the script of this part, please?

[mitja-p]

Use the same element, Plotly.react is called on. So if you initialize plot with Plotly.react(plotEl, data, layout, options) you should do something like this:
plotEl.addEventListener('wheel', handler, true);

The last true, means capture events. For explanation on capture events, search for "event bubbling capturing"

[caotoulei]

capture events

Thanks a lot, @mitja-p. I'm using angular-plotly.js, based on your suggestion, I did it this way, and it works now. (in case somebody using angular-plotly.js needs it in the future. )

<plotly-plot *ngIf="isPlotDataReady" [data]="graph.data" [layout]="graph.layout">
...

ngAfterViewInit() {
this.elementRef.nativeElement.addEventListener('wheel', this.handler, true);
}

public handler(event: any) {
console.log(event.deltaY);
if (!event.isTrusted) return;
event.stopPropagation();
var newEv = new WheelEvent('wheel', {
clientX: event.clientX,
clientY: event.clientY,
deltaY: event.deltaY / 20,
view: window,
bubbles: true,
cancelable: true
});

event.target.dispatchEvent(newEv);

}

[h-OUS-e]

has any progress been made on this issue? I am experiencing super tiny zoom steps

[kzhang2]

I am also interested in this feature. It seems that the default plotly figure zoom speed in a jupyter notebook launched within vscode is very slow, so I would like to be able to make it faster.