为了响应平移/缩放而进行范围更新的浮动事件

问题描述

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

For Flot, is there an event that fires after the user has completed panning or zooming using the mouse scroll wheel(after the range.xaxis.to/from and range.yaxis.to/from have settled)? I am trying to use the line below to update the selection on an overview plot after the user has panned or zoomed in the main plot, but am finding that either the update to the overview plot happens after panning or zooming(not both).

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

提前感谢

修改：

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);
};

这篇关于为了响应平移/缩放而进行范围更新的浮动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！