2

我相信我有一个问题，可以通过我遗漏的东西很容易地解决，但我似乎看不出实际问题是什么。我有一个应用程序，它每秒返回 5000 个点（1000 个 x，y 点的 5 个数组元素），我想在客户端使用 NVD3 进行更新。这是一个 AngularJS 应用程序，所以我使用 krisposangular-nvd3指令。但是，它使整个应用程序陷入困境，根据 Chrome 的开发人员工具捕获的时间线，该应用程序似乎要等待d3_timer_step5-6 秒才能返回。

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

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

在控制器中，选项定义如下

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

有没有人看到这里看起来明显错误的东西或者我应该做不同的事情？有没有我错过的选项？任何帮助都会很棒。

干杯，马特

4

2 回答 2

7

尝试将deepWatchData: false标志添加到配置（这意味着该指令不会监视数据以进行更新）并通过以下方式更新图表api：

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

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

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

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

然后，要更新图表，我们可以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+] 中添加了一些更新。现在 flagdeepWatchData意味着使用或不使用数据监视（它不像objectEquality以前那样）。并且deepWatchData是true默认的。但是现在我们可以$watch用一个新的标志来管理深度deepWatchDataDepth: 2，从而调节性能。使用此标志，我们可以为数据指定更改检测策略（范围 $watch 深度）：

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>

演示

于 2015-09-25T22:45:05.783 回答
1

你在用SVG吗？nvd3.lineChart是的SVG，大概。如果是这样，@mbostock 会为您提供答案：http: //bl.ocks.org/mbostock/1276463。使用 acanvas而不是SVG更快的速度。

https://www.safaribooksonline.com/blog/2014/02/20/speeding-d3-js-checklist/上的大多数建议都非常可靠。

您是否每秒重绘所有 5000 点？如果是这样，这是 webGL imo 的工作，而不是 nvd3。 canvas可能足够快来做到这一点，如果画布不够快，那么我会坚持以前的答案。

它花费了多少时间d3_timer_step？该函数会很慢是没有意义的，它可能会被调用很多次。实际上，d3_timer_frame由 调用d3_timer_step，这可能是实际的渲染代码，肯定会占用你所有的时间。尝试做canvas.

可能的 nvd3 性能改进：

  1. useInteractiveGuideline如果您还没有，请绝对禁用。
于 2015-09-25T15:34:42.110 回答