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.

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]'] );
    });
Click to copy