javascript - NVD3 堆积面积图看起来很奇怪

Question

我尝试通过 NVD3 使用堆积面积图和一些真实数据，但它看起来很奇怪:

我猜数据或数据访问器函数有问题，但我不知道到底是什么问题。

  var chart = nv.models.stackedAreaChart()
            .x(function(d) { if (typeof d !== "undefined" && d !== null) return d[0] })
            .y(function(d) { if (typeof d !== "undefined" && d !== null) return d[1] })
            .clipEdge(true)
            .useInteractiveGuideline(true)
            ;

我还注意到，如果“值”数组在不同的数据对象中具有不同的长度，它根本不起作用。是NVD3的限制还是什么？

My fiddle

Answer 1

感谢 krispo，问题已解决。为了正确显示数据，NVD3 要求数据遵循以下规则:

1. 系列应具有相同的时间尺度(范围)。
2. 系列长度，即“值”数组长度在数据中的所有对象中应该相同。

为了满足第一个要求，数据应进行如下转换:

data = data.map(function(series){
  series.values = series.values.map(function(d,i){
      return [data[2].values[i][0], d[1]]
  })
  return series;
});

如果数据具有不同的系列长度(第二个要求)，那么您应该用零填充缺失值系列。

工作示例是 here .

结果图如下: