nvd3 angular 行更新顺序

Question

当我乱序添加数据时，我在使用 nvd3 向后绘制线条时遇到了问题。

我正在尝试用 angular nvd3 制作折线图。我的 X axis 是一个日期时间值，我的 y 轴是一个数字。我已经设置了数据绑定，这样当新数据添加到我的范围对象时，图表就会更新。有时添加的数据可能是现有数据之前的日期。

这会导致 svg 行自行回绕。有没有办法确保始终按照它们在轴上的排列顺序从一点到另一点绘制一条线，而不是按照它们添加到数据集中的顺序？

您可以在这个实时更新的 nvd3 angular plunker 中看到此类问题的示例。这里我让 X 和 Y 都是随机的，并且这条线到处都是。

http://plnkr.co/edit/NDxrdZBfrg6Xn29GLuk0?p=preview

setInterval(function() {
  if (!$scope.run) return;
  $scope.data[0].values.push({
    x: Math.random() - 0.5,
    y: Math.random() - 0.5
  });
  if ($scope.data[0].values.length > 20) $scope.data[0].values.shift();
  x++;

  $scope.$apply(); // update both chart
}, 500);

my app example

Answer 1

答案。

在更新范围之前对数据进行排序。在这个例子中是这样的：

// sort by value
$scope.data[0].values.sort(function (a, b) {
return a.x - b.x;
});

首先将新数据拼接在数组中的正确位置并避免排序会更具可扩展性。

nvd3 angular 行更新顺序

nvd3 angular line update order

nvd3.js

angular