范围更新的浮动事件以响应 panning/zooming

Question

对于 Flot，是否有一个事件在用户使用鼠标滚轮完成平移或缩放后触发（在 range.xaxis.to/from 和 range.yaxis.to/from 已经解决）？我试图在用户平移或缩放主图后使用下面的行更新概览图上的选择，但我发现概览图的更新发生在平移或缩放之后（不是两者）。

$("#plot").bind("mouseup scroll",updateOverviewSelection);

编辑：http://jsfiddle.net/apandit/nu2rr58h/9/

在 jsfiddle 中，我无法在主图中平移并且光标似乎没有变回正常。用户可以在概览图中单击并拖动以进行选择，从而放大主图。我还希望能够允许用户平移和缩放主图，并更新概览图中的选择框；我试图通过将 updateOverviewSelection 方法绑定到 plot div 来实现滚动和 mouseup 事件。每次更新 x 轴和 y 轴限制时，Flot 中是否有一个事件会触发？

Answer 1

此问题的解决方案如下。问题是设置概览图的选择（overview.setSelection(ranges);）触发了缩放方法，因为它绑定到概览图中的 plotselected 事件。在 zoom 方法的最后，绘制了主要情节，再次调用 updateOverviewSelection 方法中的 overview.setSelection(ranges); 行。为了防止这两个 methods/events 之间的乒乓球，我添加了一个 updatingOverviewSelection 标志。

http://jsfiddle.net/apandit/nu2rr58h/12/

var datasets = [[
                    [0,0],[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9]
                ],
                [
                    [0,0],[-1,-1],[-2,-2],[-3,-3],[-4,-4],[-5,-5],[-6,-6],[-7,-7],[-8,-8],[-9,-9]
                ]];

var plot = $.plot("#plot",datasets,{
        pan: {
          interactive: true
        },
        zoom: {
          interactive: true,
          mode: "x"
        }
    });

var overview = $.plot("#overview",datasets,{
    selection: {
        mode: "xy"
    }
});

var updatingOverviewSelection = false;

$("#plot").bind("plotpan plotzoom",updateOverviewSelection);
$("#overview").bind("plotselected", zoom);

function zoom(event,ranges) {
    if(updatingOverviewSelection) {
        updatingOverviewSelection = false;
    }
    else {
        var options = plot.getOptions();

        options.xaxes[0].min = ranges.xaxis.from;
        options.xaxes[0].max = ranges.xaxis.to;
        options.yaxes[0].min = ranges.yaxis.from;
        options.yaxes[0].max = ranges.yaxis.to;         

        plot = $.plot("#plot",datasets,options);
    }
};

// get the window x-axis and y-axis ranges for the main plot
// and set the selection in the overview plot to those ranges
function updateOverviewSelection(event) {
        var options = plot.getOptions();

        var ranges = {
            xaxis: {
                from: options.xaxes[0].min,
                to: options.xaxes[0].max
            },
            yaxis: {
                from: options.yaxes[0].min,
                to: options.yaxes[0].max
            }
        };

        updatingOverviewSelection = true;
        overview.setSelection(ranges);
};

范围更新的浮动事件以响应 panning/zooming

Flot event for range updates in response to panning/zooming

javascript

jquery

flot

event-handling

jquery-events