1

コードを見ると、NVD3 のlineWithFocusChartがどのようにフォーカス ウィンドウを作成するのかまだよくわかりませんが、側面に 2 つの長方形を作成することでそうなっていると思います。私の質問は、フォーカス ウィンドウの境界の 1 つがビューファインダーの側面に当たったときに何らかのイベントをトリガーするようにするにはどうすればよいかということです。より多くのデータをロードできますか？
たとえば、現時点では、1 か月分のデータをロードしていて、ビューファインダーが左端に達したときに別の月をロードしたいと考えています。

onBrush() 関数の nv.d3.js ソース コードでイベントをトリガーしようとしています。

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

したがって、問題は、この方法で実行され、おそらくこれが正しい方法ではない場合、このイベントが発生したことを他のプログラムに通知して、より多くのデータをロードできるようにするにはどうすればよいですか?

4

1 に答える 1

2

（私自身の質問に答える:)これが私にとってうまくいったことであり、それが私が知らない最善の方法であるかどうかにかかわらず（おそらくそうではない）誰かがそれを持っているなら、私はより良い解決策を歓迎します。

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


}

そしてコントローラーで：...

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

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

nv.d3 のソース コードをいじったり、$rootScope を使用したりするのは快適ではありませんが、より良い方法が見つかるまでは機能しています。

于 2013-10-01T17:37:15.483 に答える