NVD3 角线更新顺序

Question

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

我正在尝试制作带有角度 nvd3 的折线图。我的X axis是日期时间值，y 轴是数字。我已经设置了数据绑定，以便在将新数据添加到范围对象时，图表将更新。 有时，要添加的数据可能是现有数据之前的日期。

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

您可以在此实时更新的nvd3角度弹跳器中看到此类问题的示例。在这里，我使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);

我的应用示例

Answer 1

答案。

在更新范围之前对数据进行排序。 在此示例中，如下所示：

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

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