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

my app example

Answer 1

答え。

スコープを更新する前にデータを並べ替えます。

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

最初の場所では、アレイ内の適切な場所に新しいデータにスプライスし、ソートを回避するために、よりスケーラブルで、次のようになりますように、この例の何かで 。