使用NVD3从轴获取渲染日期范围

时间:2015-09-01 09:21:46

标签: nvd3.js angular-nvd3

我正在使用NVD3显示多个折线图,并希望能够获得当前显示的xAxis的最小值和最大值。在这种情况下,xAxis显示时间值。

在切换图表中线条的可见性时,通过单击图例标签,可以更改日期范围。我添加了一个事件处理程序来收听legendClicks但是如何获得新渲染的日期范围呢?

1 个答案:

答案 0 :(得分: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 } ] } ]

当我达到目前为止,客户改变了主意,并且不想要需要此解决方案的功能。希望它可能对其他人有用。