Javascript NVD3堆叠面积图看起来很奇怪

我曾尝试通过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)
            ;

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

---

多亏了krispo，问题才得以解决。 为了正确显示数据，NVD3要求数据遵循以下规则：

序列应具有相同的时间刻度（范围）

序列长度，即数据中所有对象的“值”数组长度应相同

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

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

如果数据具有不同的序列长度（第二个要求），则应使用零填充缺失的序列值

工作示例是

结果图片如下：

---

多亏了krispo，问题才得以解决。 为了正确显示数据，NVD3要求数据遵循以下规则：

序列应具有相同的时间刻度（范围）

序列长度，即数据中所有对象的“值”数组长度应相同

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

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

如果数据具有不同的序列长度（第二个要求），则应使用零填充缺失的序列值

工作示例是

结果图片如下：

---

这是因为您的系列具有不同的时间范围。您应该使用相同的时间刻度来正确显示。请参见本例中使用的其他比例。序列差计算为具有相同数据数组索引的元素之间的差。所以，我想这就是为什么系列长度应该是一样的。谢谢你的回答。这是有道理的，但使用真实数据无法始终达到相同的序列长度和时间尺度要求。此外，我还注意到，虽然useInteractiveGuideline设置为true，但在您的示例中已出现，抛出“无法读取未定义的属性“0”错误。只需转换数据即可。再次感谢，效果非常好。请使用覆盖所有序列的常规时间刻度和范围，然后只填充缺失的值（在y轴上）所有系列的

0

。应该有用！这是因为您的系列具有不同的时间范围。您应该使用相同的时间刻度来正确显示。请参见本例中使用的其他比例。序列差计算为具有相同数据数组索引的元素之间的差。所以，我想这就是为什么系列长度应该是一样的。谢谢你的回答。这是有道理的，但使用真实数据无法始终达到相同的序列长度和时间尺度要求。此外，我还注意到，虽然useInteractiveGuideline设置为true，但在您的示例中已出现，抛出“无法读取未定义的属性“0”错误。只需转换数据即可。再次感谢，效果非常好。请使用覆盖所有序列的常规时间刻度和范围，然后只填充缺失的值（在y轴上）所有系列的

0

。应该有用@ovvn…我试图做一些类似的事情，但是遇到了相同的问题，数组长度和时间序列是相同的。我的数据结构的格式与示例不同，但由于某种原因无法使其与您的方法配合使用，我在这里发布了一些示例数据：@ovvn…我正在尝试做一些类似的事情，但遇到了相同的问题，数组长度和时间序列是相同的。我的数据结构的格式与示例不同，但出于某种原因，无法使其与您的方法配合使用，因此我在这里发布了一些示例数据：