NVD3 を使用して多数の折れ線グラフを表示していますが、現在表示されている xAxis の最小値と最大値を取得できるようにしたいと考えています。この場合、xAxis は時間値を示します。
凡例ラベルをクリックしてグラフの線の表示を切り替えると、日付範囲が変更されます。legendClicks をリッスンするイベント ハンドラーを追加しましたが、新しくレンダリングされた日付範囲を取得するにはどうすればよいですか?
質問する
407 次
1 に答える
1
凡例をクリックすると、カスタム関数を使用してx軸の最小/最大値を見つけることになりました。ダイジェスト サイクルが完了して適切な値を取得するのを待つために、関数を $timeout 内にラップしました。
legend: {
dispatch: {
legendClick: function(e) {
$timeout(function(){
getMinMax();
}, 0);
}
}
},
このgetMinMax関数は手早く汚れたものであり、おそらくよりエレガントな方法で実行される可能性がありますが、その役割は果たします。
var getMinMax = function(){
var maxVal, minVal = null;
for(var i=0;i<$scope.data.length;i++) {
// Only displayed should be considered
if (!$scope.data[i].disabled) {
var tempMinVal = d3.max($scope.data[i].values, function(d) { return d.x;} );
var tempMaxVal = d3.min($scope.data[i].values, function(d) { return d.x;} );
minVal = (!minVal || tempMinVal < minVal) ? tempMinVal : minVal;
maxVal = (!maxVal || tempMaxVal > maxVal) ? tempMaxVal : maxVal;
}
}
return [minVal, maxVal];
};
この形式でデータから最小値と最大値を取得します。
[
{
"key": "AA",
"values": [
{
"x": 1440712800000,
"y": "6",
"series": 0
},
{
"x": 1440712800000,
"y": "6",
"series": 0
}
]
},
{
"key": "BB",
"values": [
{
"x": 1441144800000,
"y": "3",
"series": 1
},
{
"x": 1443045600000,
"y": "3",
"series": 1
},
{
"x": 1453244400000,
"y": "3",
"series": 1
},
{
"x": 1454022000000,
"y": "3",
"series": 1
}
]
},
{
"key": "CC",
"values": [
{
"x": 1442872800000,
"y": "5",
"series": 2
},
{
"x": 1442872800000,
"y": "5",
"series": 2
}
]
},
{
"key": "DD",
"values": [
{
"x": 1443650400000,
"y": "1",
"series": 3
},
{
"x": 1443650400000,
"y": "1",
"series": 3
}
]
},
{
"key": "EE",
"values": [
{
"x": 1444773600000,
"y": "9",
"series": 4
},
{
"x": 1446073200000,
"y": "9",
"series": 4
}
]
}
]
私がここまでたどり着いたとき、クライアントは考えを変え、このソリューションを必要とする機能を望んでいませんでした。それが他の誰かに役立つことを願っています。
于 2015-09-02T10:16:22.330 に答える