Plotlyjs 局部放大视图

在 Plotlyjs 中，可以使用 relayout 方法来实现局部放大视图。具体步骤如下：

1. 定义一个初始布局对象 layout。

2. 监听鼠标事件，例如 plotly_hover 事件，在事件回调函数中获取鼠标当前所在的位置。

3. 计算局部放大区域的坐标范围。

4. 使用 relayout 方法更新布局对象，设置 xaxis 和 yaxis 的范围。

5. 渲染更新后的图表。

下面是一个示例代码，实现了在鼠标悬停时局部放大视图的效果：

var data = [{
    x: [1, 2, 3, 4, 5],
    y: [1, 3, 2, 4, 3],
    mode: 'lines+markers'
}];

var layout = {
    xaxis: {
        range: [0, 6]
    },
    yaxis: {
        range: [0, 5]
    }
};

Plotly.newPlot('myDiv', data, layout);

var prev_range = null;

document.getElementById('myDiv').on('plotly_hover', function(data){
    var x_val = data.points[0].x;
    var y_val = data.points[0].y;

    // calculate the range of the zoomed section
    var x_range = [x_val - 0.5, x_val + 0.5];
    var y_range = [y_val - 0.5, y_val + 0.5];

    // update the layout
    prev_range = [layout.xaxis.range, layout.yaxis.range];
    Plotly.relayout('myDiv', {
        'xaxis.range': x_range,
        'yaxis.range': y_range
    });
});

document.getElementById('myDiv').on('plotly_unhover', function(data){
    // reset the layout to its previous range
    if (prev_range) {
        Plotly.relayout('myDiv', {
            'xaxis.range': prev_range[0],
            'yaxis.range': prev_range[1]
        });
        prev_range = null;
    }
});

在上面的代码中，我们监听了 plotly_hover 和 plotly_unhover 事件。当鼠标悬停在图表上时，计算出局部放大区域的坐标范围，并使用 relayout 更新布局对象；当鼠标离开时，恢复之前的坐标范围。注意，为了恢复之前的坐标范围，我们需要记录下之前的坐标范围，这里使用了 prev_range 变量来保存。