使用 NVD3 从轴获取渲染日期范围
Getting rendered date range from axis with NVD3
我正在使用 NVD3 显示多个折线图，并希望能够获取当前显示的 xAxis 的最小值和最大值。在这种情况下，xAxis 显示时间值。
在图表中切换线条的可见性时，通过单击图例标签，日期范围会发生变化。我已经添加了一个事件处理程序来侦听 legendClicks，但我如何获得新呈现的日期范围？
我最终使用自定义函数在单击图例时找到 x 轴的 min/max 值。我将函数包装在 $timeout 内，以便等待摘要周期完成以获得正确的值，即：
legend: {
dispatch: {
legendClick: function(e) {
$timeout(function(){
getMinMax();
}, 0);
}
}
},
getMinMax 函数是一个快速而肮脏的函数，很可能以更优雅的方式完成，但它确实发挥了作用：
var getMinMax = 函数(){
var maxVal, minVal = null;<br>
对于（var i=0；i<$scope.data.length；i++）{
// 只考虑显示
如果 (!$scope.data[i].disabled) {<br>
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) ?临时最小值：最小值；
maxVal = (!maxVal || tempMaxVal > maxVal) ?临时最大值：最大值；
}
}
return [最小值, 最大值];
};
将从以下格式的数据中获取最小值和最大值：
[
{
"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
}
]
}
]
当我走到这一步时，客户改变了主意，不想要需要此解决方案的功能。希望它可能对其他人有用。
我正在使用 NVD3 显示多个折线图，并希望能够获取当前显示的 xAxis 的最小值和最大值。在这种情况下，xAxis 显示时间值。
在图表中切换线条的可见性时，通过单击图例标签，日期范围会发生变化。我已经添加了一个事件处理程序来侦听 legendClicks，但我如何获得新呈现的日期范围？
我最终使用自定义函数在单击图例时找到 x 轴的 min/max 值。我将函数包装在 $timeout 内，以便等待摘要周期完成以获得正确的值，即：
legend: {
dispatch: {
legendClick: function(e) {
$timeout(function(){
getMinMax();
}, 0);
}
}
},
getMinMax 函数是一个快速而肮脏的函数，很可能以更优雅的方式完成，但它确实发挥了作用：
var getMinMax = 函数(){
var maxVal, minVal = null;<br>
对于（var i=0；i<$scope.data.length；i++）{
// 只考虑显示
如果 (!$scope.data[i].disabled) {<br>
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) ?临时最小值：最小值；
maxVal = (!maxVal || tempMaxVal > maxVal) ?临时最大值：最大值；
}
}
return [最小值, 最大值];
};
将从以下格式的数据中获取最小值和最大值：
[
{
"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
}
]
}
]
当我走到这一步时，客户改变了主意，不想要需要此解决方案的功能。希望它可能对其他人有用。