Hello,
We are developing an AngularJS application with some Plotly.js scatter charts. We want to hide the toolbar but at the same time use some of its features. For example, the toolbar contains the zoom tool, but we would like the user to be able to zoom in/out of the chart by hovering over the chart and turning the mouse scroll wheel.
I am able to implement the following code so far:
The template and the chart div:
<div ng-if="dataReady" id="scatter-plot-chart" ng-mouseover="isMouseOver = true" ng-mouseleave="isMouseOver = false"></div>
Setting up mouse wheel event listener:
document.addEventListener('wheel', function(event) {
$scope.$broadcast('mouse-wheel', {
wheelMovement: event.deltaY,
mouseX: event.clientX,
mouseY: event.clientY
});
});
Handling mouse wheel event:
$scope.$on('mouse-wheel', function(e, mouseInfo) {
if (isMouseOver) {
zoom(mouseInfo);
}
});
So my question is: how would zoom() be implemented? How would it 1) invoke the zoom behavior of the chart given the deltaY value (amount/direction of zooming) of the wheel movement, and 2) determine the point on the chart to zoom into given the mouse position (clientX and clientY). In other words, how would I convert the mouse position to a chart position and give that chart position to the chart’s native zoom function(s)?
Alternatively, if this is the wrong approach to take, how else would one hook into the zoom feature of the scatter plot when the toolbar is not available?
Thanks!