Zoom Events in JavaScript

How to bind callback functions to zoom events in D3.js-based JavaScript charts.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.

Binding to Zoom Events

var graphDiv = document.getElementById('myDiv');
var N = 40,
    x = d3.range(N),
    y = d3.range(N).map( d3.random.normal() ),
    data = [ { x:x, y:y } ];
    layout = { title: {text: 'Click-drag to zoom' }};
Plotly.newPlot(graphDiv, data, layout);
graphDiv.on('plotly_relayout',
    function(eventdata){
        alert( 'ZOOM!' + '\n\n' +
            'Event data:' + '\n' +
             JSON.stringify(eventdata) + '\n\n' +
            'x-axis start:' + eventdata['xaxis.range[0]'] + '\n' +
            'x-axis end:' + eventdata['xaxis.range[1]'] );
    });