javascript - 与 angular-nvd3 一起使用的 nvd3 是 slooooowwwww

Question

我相信我有一个问题可以很容易地通过我遗漏的东西来解决，但我似乎看不出真正的问题是什么。我有一个应用程序每秒返回 5000 个点(1000 个 x，y 点的 5 个数组元素)，我想使用 NVD3 在客户端更新。这是一个 AngularJS 应用程序，所以我使用的是 krispos angular-nvd3指示。然而，它使整个应用程序陷入困境，而且根据 Chrome 开发人员工具捕获的时间线，应用程序似乎正在等待 d3_timer_step 返回 5-6 秒。

我认为这个问题是由于我们更新数据的方式造成的，但整个问题似乎与实际的 d3 部分有关。客户端的代码是

<nvd3 options="optionsRingdown" data="ringdownAvg" config="{refreshDataOnly:true}"></nvd3>

Controller 中的选项定义如下

$scope.options = {
    chart: {
      type: 'lineChart',
      height: 300,
      margin: {
        top: 20,
        right: 40,
        bottom: 60,
        left: 75
      },
      x: function(d) {
        return d.x;
      },
      y: function(d) {
        return d.y;
      },
      useInteractiveGuideline: false,
      yAxis: {
        tickFormat: function(d) {
          return d3.format('0.01f')(d);
        },
        axisLabel: 'Testing'
      },
      xAxis: {
        tickFormat: function(d) {
          return d3.time.format('%X')(new Date(d));
        },
        rotateLabels: -45
      },
      transitionDuration: 0,
      showXAxis: true,
      showYAxis: true
    }
  };

数据在下面的模板中定义

var ringdownT = [{
   values: [],
   key: 'Cell 0'
 }, {
   values: [],
   key: 'Cell 1'
 }, {
   values: [],
   key: 'Cell 2'
 }, {
   values: [],
   key: 'Cell 3'
 }, {
   values: [],
   key: 'Cell 4'
 }];

数据通过使用以下服务广播的函数调用进行更新

function updateCRD(d){
   var dataOut = {
     "tauData": [],
     "rdFit": ringdownT,
     "rdAvg":ringdownT
   }
   for (k = 0; k < d.cell.length; k++) {
     dataOut.rdAvg[k].values = d.cell[k].avg_rd;
     dataOut.rdFit[k].values = d.cell[k].fit_rd;
   }

   return dataOut;
}

该函数在广播中使用以下内容调用(以 1 秒为间隔广播)

$scope.$on('dataAvailable', function() {

    $scope.data = Data.crd;

    var data = updateCRD(Data.crd);

    $scope.tauData = data.tauData;
    $scope.ringdownAvg = data.rdAvg;
    $scope.ringdownFit = data.rdFit;
});

有没有人看到这里有明显错误的地方，或者我应该采取不同的做法？我缺少一个选项吗？任何帮助都会很棒。

干杯，马特

Answer 1

尝试在配置中添加 deepWatchData: false 标志(这意味着该指令不会监视数据的更新)并通过 api 更新图表:

<nvd3 options="optionsRingdown" data="ringdownAvg" api="apiRingdown" config="{refreshDataOnly:true, deepWatchData: false}"></nvd3>

该指令使用 $watch(watchExpression, listener, [objectEquality]) 方法监视选项和复杂数据对象的任何更新。在我们的例子中，deepWatchData 是 objectEquality 标志，同时监 View 表数据以进行更新。

根据 Angular docs ，watchExpression的不等式是根据angular.equals函数来判断的。为了保存对象的值以供以后比较，使用了 angular.copy 函数。因此，这意味着观看复杂的对象会对内存和性能产生不利影响。

仅在版本 (1.0.2, 1.0.3) 中，此标志默认为 false。

---

然后，要更新图表，我们可以在您的 Controller 中使用 apiRingdown.update 方法:

$scope.$on('dataAvailable', function() {

    $scope.data = Data.crd;

    var data = updateCRD(Data.crd);

    $scope.tauData = data.tauData;
    $scope.ringdownAvg = data.rdAvg;
    $scope.ringdownFit = data.rdFit;

    //this line updates the chart
    $scope.apiRingdown.update();
});

---

更新

在最新版本 [1.0.4+] 中添加了一些更新。现在标记 deepWatchData 意味着使用或根本不使用数据监视(它不是像以前那样的 objectEquality )。 deepWatchData 默认为 true。但是现在我们可以使用新标志 deepWatchDataDepth: 2 来管理 $watch 深度，从而调节性能。有了这个标志，我们可以为数据指定一个变化检测策略(scope $watch depth):

0 - By Reference (the least powerful, but the most efficient)
1 - By Collection Items
2 - By Value (the most powerful, but also the most expensive; default value)

此外，标记 refreshDataOnly 默认为 true。

因此，更新后的标签元素可能如下所示:

<nvd3 options="optionsRingdown" data="ringdownAvg" api="apiRingdown" config="{deepWatchDataDepth: 0}"></nvd3>

demo