NVD3 堆积面积图看起来很奇怪答案

【问题标题】：NVD3 Stacked Area chart looks weirdNVD3 堆积面积图看起来很奇怪
【发布时间】：2014-08-12 00:47:47
【问题描述】：

我尝试通过 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的限制还是什么？

My fiddle

【问题讨论】：

这是因为你的系列有不同的时间范围。您应该使用相同的时间刻度才能正确显示。请参阅 example - other 在此示例中使用比例。系列差异计算为数据数组具有相同索引的元素之间的差异。所以，认为这就是系列长度应该相同的原因。
感谢您的回答。有道理，但相同的系列长度和时间尺度要求不能总是用真实数据来实现。另外，我注意到 useInteractiveGuideline 已在您的示例中出现，尽管它设置为 true，引发“无法读取未定义的属性 '0'”错误。
只是转换数据，updated。
再次感谢，效果很好。
采用涵盖所有系列的通用时间尺度和范围，然后为所有系列使用0 填充缺失值（在y 轴上）。应该工作！

标签： javascript d3.js nvd3.js

【解决方案1】：

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

系列应具有相同的时间刻度（范围）。
系列长度，即“值”数组长度在数据中的所有对象中应该相同。

为了满足第一个要求，数据应该如下变换：

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

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

工作示例是here。

结果图片如下：

【讨论】：

@ovvn...我正在尝试做类似的事情，但遇到了同样的问题，数组长度和时间序列相同。我的数据结构的格式与示例不同，但由于某种原因无法与您的方法一起使用，我分叉了小提琴并在此处发布了一些示例数据：jsfiddle.net/vy6637ne