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角线更新顺序

1 个答案: