Zoom Events in plotly.js

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

Binding to Zoom Events

var myDiv = document.getElementById('myDiv');

var d3 = Plotly.d3,
    N = 40,
    x = d3.range(N),
    y = d3.range(N).map( d3.random.normal() ),
    data = [ { x:x, y:y } ];
    layout = { title:'Click-drag to zoom' };

Plotly.plot(myDiv, data, layout);

myDiv.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]'] );
    });