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

Question

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

当切换图表中线条的可见性时，通过单击图例标签，日期范围会发生变化。我添加了一个事件处理程序来监听 legendClicks，但我如何才能掌握新呈现的日期范围？

Answer 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 } ] } ]

当我走到这一步时，客户改变了主意，不想要需要此解决方案的功能。希望对其他人有用。