當取景器邊界與AngularJS中的右邊界或左邊界相交時，如何在NVD3的lineWithFocusChart中加載更多數據？

Question

看着代碼，我還沒有完全想到NVD3的lineWithFocusChart如何創建焦點窗口，但我相信這是通過在兩側製作兩個矩形來實現的。我的問題是，當一個焦點窗口邊界觸及取景器的一側時，如何才能觸發某些事件？所以你可以加載更多的數據？
例如，目前，我已經加載了一個月的數據，並希望當取景器到達左邊界時再加載一個月。

我試圖觸發在nv.d3.js源代碼的事件在onBrush（）函數：

function onBrush() { 
    brushExtent = brush.empty() ? null : brush.extent(); 
    var extent = brush.empty() ? x2.domain() : brush.extent(); 
    //The brush extent cannot be less than one. If it is, don't update the line chart. 
    if (Math.abs(extent[0] - extent[1]) <= 1) { 
     return; 
    } 
    if (extent[1] !== x2.domain()[1] && extent[0] === x2.domain()[0]) //my attempt  
     console.log("Wheaton!"); // my attempt - do something here 
    dispatch.brush({extent: extent, brush: brush}); 


    updateBrushBG(); 

    // Update Main (Focus) 
    var focusLinesWrap = g.select('.nv-focus .nv-linesWrap') 
     .datum(
      data 
      .filter(function(d) { return !d.disabled }) 
      .map(function(d,i) { 
       return { 
       key: d.key, 
       values: d.values.filter(function(d,i) { 
        return lines.x()(d,i) >= extent[0] && lines.x()(d,i) <= extent[1]; 
       }) 
       } 
      }) 
     ); 

所以，現在的問題是，如果是做這樣一來，和也許這不是正確的做法，我如何通知其他程序發生此事件，以便可以加載更多數據？

Answer 1

（回答我自己的問題:) 這對我來說很有效，不管它是否是我不知道的最好的方式（可能不是）。如果有人有一個，我會歡迎更好的解決方案。

在NVD3之外，我在rootScope上創建了一個函數來廣播其他函數可以偵聽的事件，並且將$ rootScope傳遞給NVD3並調用onBrush（）中的廣播器。

例如，

在我的指令，它封裝NVD3：

... 
    $rootScope.loadMoreData = function() { 
     $rootScope.$broadcast('loadMoreData'); 
    } 
    ... 
    var chart = nv.models.lineWithFocusChart($rootScope); // which gets passed to NVD3 
    ... 

在nv.d3源代碼：

... 
nv.models.lineWithFocusChart = function(rootScope) { // add parameter 
... 
    function onBrush() { 
     brushExtent = brush.empty() ? null : brush.extent(); 
     var extent = brush.empty() ? x2.domain() : brush.extent(); 
     //The brush extent cannot be less than one. If it is, don't update the line chart. 
     if (Math.abs(extent[0] - extent[1]) <= 1) { 
      return; 
     } 
     if (extent[1] !== x2.domain()[1] && extent[0] === x2.domain()[0]) 
      rootScope.loadMoreData(); 
     dispatch.brush({extent: extent, brush: brush}); 


     updateBrushBG(); 

     // Update Main (Focus) 
     var focusLinesWrap = g.select('.nv-focus .nv-linesWrap') 
      .datum(
       data 
       .filter(function(d) { return !d.disabled }) 
       .map(function(d,i) { 
        return { 
        key: d.key, 
        values: d.values.filter(function(d,i) { 
         return lines.x()(d,i) >= extent[0] && lines.x()(d,i) <= extent[1]; 
        }) 
        } 
       }) 
      ); 
     focusLinesWrap.transition().duration(transitionDuration).call(lines); 


     // Update Main (Focus) Axes 
     g.select('.nv-focus .nv-x.nv-axis').transition().duration(transitionDuration) 
      .call(xAxis); 
     g.select('.nv-focus .nv-y.nv-axis').transition().duration(transitionDuration) 
      .call(yAxis); 
     } 


} 

和Controller： ...

$rootScope.$on('loadMoreData', function() { 

    // reload the data with new date range 
    $scope.data = foo.query(); 
}); 

也許在做nv.d3的源代碼或使用$ root的時候，我覺得不舒服範圍，但它的工作，直到我找出更好的方法。