Flot響應平移/縮放範圍更新的事件

Question

對於Flot，在用戶使用鼠標滾輪完成平移或縮放後（在range.xaxis.to/from和range.yaxis之後會觸發事件.to/from已經結算）？在用戶平移或放大主圖之後，我嘗試使用下面的一行來更新總覽圖上的選擇，但是我發現在平移或縮放（不是兩者）後會發生概覽圖的更新。

在此先感謝。

編輯：http://jsfiddle.net/apandit/nu2rr58h/9/

在的jsfiddle，我無法在主線劇情平移光標似乎並沒有改變恢復正常。用戶可以在概覽圖中單擊並拖動以進行選擇，從而導致放大主圖。我還希望能夠讓用戶平移和放大主圖並更新總覽圖中的選擇框;我正試圖通過將updateOverviewSelection方法綁定到scroll和mouseup事件的plot div來做到這一點。每當X軸和Y軸限制更新時，Flot中是否有事件觸發？

Answer 1

此問題的解決方案如下。問題在於，設置概覽圖的選擇（overview.setSelection(ranges);）正在觸發縮放方法，因爲它被綁定到概覽圖中的plotselected事件。在zoom方法結束時，繪製了主圖，該圖再次調用updateOverviewSelection方法中的overview.setSelection(ranges);一行。爲了防止這兩種方法/事件之間的乒乓，我添加了一個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); 
};