javascript - D3 访问二维对象数组中的最大值 - 刷 Y 轴

Question

我有一个 D3 堆积面积图，我正在尝试重新计算刷牙时的 Y 轴。问题是，当我重新计算 Y 轴的最大值时，它不是所有不同层的组合，它只是最后一层。例如，如果我同时刷了 1/17 和 1/20 日期，我将得到 45 作为最大 Y 轴值，而不是 95 (50 + 45)。数据如下:

[
  {
     "key": "Failed",
     "vis": "1",
     "values": [
        {
           "date": "2014-01-17T05:00:00.000Z",
           "total": 50
        },
        {
           "date": "2014-01-20T05:00:00.000Z",
           "total": 23
        }
     ]
  },
  {
     "key": "Success",
     "vis": "1",
     "values": [
        {
           "date": "2014-01-17T05:00:00.000Z",
           "total": 45
        },
        {
           "date": "2014-01-20T05:00:00.000Z",
           "total": 12
        }
     ]
  }
]

这是我正在使用的一些示例代码。我知道外循环的每次迭代都会清除前一个循环，但我不确定如何修复它:

for (var i = 0; i < dataSeries.length; i++) {
    if(dataSeries[i]['vis'] === "1") {

        dataFiltered = dataSeries[i]['values'].filter(function(d) {

            if((d.date >= main_x.domain()[0]) && (d.date <= main_x.domain()[1])) {

                // this is just returning the biggest total in the date range from the last layer (i.e.: 'Failed'),
                // not the greatest of all the layers for that day                       
                return yValue(d);   
            }                           
        });
    }
}

这是一个fiddle - 如果您刷过一系列日期，Y 轴最大值将不正确，并且图表的顶部将被切断。感谢您的帮助。

Answer 1

您在 dataSeries 的每次迭代中都会破坏 dataFiltered。在 dataSeries 中，堆栈中的每个级别都有一个元素，因此这意味着 dataFiltered 将仅包含最后一个元素的值。

但即使您解决了该问题，您设置 y 比例域的方式仍然有些奇怪:

main_y.domain([0, d3.sum(dataFiltered.map(function(d) { return d.total; }))]);

这会将域的上限值设置为所刷范围内所有数据点的总和。您可能真正想要的是该范围内的最大完全堆叠高度。

你可以这样做:

var dataFiltered = dataSeries.map(function(series) {
    return series.values.filter(function(d) {
        if((d.date >= main_x.domain()[0]) && (d.date <= main_x.domain()[1])) {
            return yValue(d);
        }
    });
});

此时，dataFiltered 看起来就像 dataSeries 一样，只是它应该只包含来自刷过范围的数据点。

现在您需要将其翻转过来，以便数据点按照堆栈而不是系列进行定向:

var dataStackSums = {};
dataFiltered.forEach(function(series) {
    series.values.forEach(function(d) {
        if (!dataStackSums[d.date]) { dataStackSums[d.date] = 0; }
        dataStackSums[d.date] += d.total;
    });
});

此时，dataStackSums 包含每个 X 轴值(日期)的属性，以及表示该堆栈的 Y 轴总和的值。从这里您只需要确定最大堆栈:

var max = 0;
Object.keys(dataStackSums).forEach(function(key) {
    max = Math.max(max, dataStackSums[key]);
});

然后您可以设置域:

main_y.domain([0, max]);

请注意，为了清楚起见，我分解了这些步骤，但您可以将过滤和面向堆栈合并为一个步骤以提高效率。