为了响应平移/缩放而进行范围更新的浮动事件 [英] Flot event for range updates in response to panning/zooming

问题描述

对于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);

提前感谢

修改： http://jsfiddle.net/apandit/nu2rr58h/9/

在jsfiddle中，我无法在主图中平移，并且游标似乎没有恢复正常。用户可以在总览图中单击并拖动进行选择，从而可以放大主图。我也希望能够让用户平移和放大主图，并在概览图中更新选择框;我试图通过将 updateOverviewSelection 方法绑定到滚动和mouseup事件的plot div来执行此操作。每次更新x轴和y轴限制时，Flot中都会发生一个事件？

In the jsfiddle, I am unable to pan in the main plot and the cursor does not seem to change back to normal. The user can click and drag in the overview plot to make a selection, which leads to zooming in the main plot. I would also like to be able to allow the user to pan and zoom in the main plot and have the selection box in the overview plot updated; I am attempting to do this by binding the updateOverviewSelection method to the plot div for the scroll and mouseup events. Is there an event in Flot that fires every time the x- and y-axis limits are updated?

推荐答案

解决方案问题在下面。问题是设置概述图的选择（ overview.setSelection（ranges）; ）触发缩放方法，因为它被绑定到 plotselected 事件在概述图。在缩放方法的末尾，绘制了主图，再次调用了 overview.setSelection（ranges）; line in updateOverviewSelection 方法。为了防止这两个方法/事件之间的这个乒乓，我添加了一个 UpdatingOverviewSelection 标志。

The solution to this issue is below. The issue was that setting the overview plot's selection(overview.setSelection(ranges);) was triggering the zoom method because it was bound to the plotselected event in the overview plot. At the end of the zoom method, the main plot was plotted, which was again calling the overview.setSelection(ranges); line in the updateOverviewSelection method. To prevent this ping-pong between the two methods/events, I added an updatingOverviewSelection flag.

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

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