NVD3 的实时代码示例不接受我的JSON

Question

我正在尝试在 NVD3 的实时代码编辑器中使用我的 JSON 文件来制作堆叠面积图：http://nvd3.org/livecode/index.html#codemirrorNav 这是我的 JSON 文件：

[{"key":"SSB","values":[]},{"key":"GEN","values":[]},{"key":"LYM","values":[]},{"key":"LUD","values":[]},{"key":"GCC","values":[[1433116800000,1],[1434326400000,2],[1434499200000,2],[1434931200000,1],[1435536000000,1],[1437436800000,1],[1437523200000,1],[1439164800000,1],[1439251200000,1],[1439942400000,1],[1440288000000,1],[1465257600000,3]]},{"key":"MAC","values":[[1465257600000,1]]},{"key":"MMB","values":[[1420156800000,2],[1420416000000,1],[1420502400000,4],[1420588800000,1],[1420675200000,2],[1420761600000,1],[1421020800000,2],[1421107200000,6],[1421193600000,3],[1421280000000,3],[1421366400000,2],[1421625600000,7],[1421712000000,4],[1421798400000,1],[1421884800000,3],[1421971200000,4],[1422230400000,3],[1422316800000,5],[1422403200000,3],[1422489600000,3],[1422576000000,6],[1422921600000,8],[1423008000000,10],[1423094400000,8],[1423180800000,17],[1423267200000,1],[1423353600000,2],[1423440000000,3],[1423526400000,2],[1423699200000,5],[1423785600000,3],[1424131200000,6],[1424217600000,4],[1424304000000,5],[1424390400000,2],[1424563200000,1],[1424736000000,2],[1424822400000,2],[1424995200000,8],[1425340800000,7],[1425427200000,4],[1425513600000,2],[1425600000000,5],[1425772800000,1],[1425859200000,3],[1425945600000,4],[1426032000000,6],[1426118400000,3],[1426204800000,2],[1426377600000,1],[1426550400000,5],[1426636800000,2],[1426723200000,1],[1426809600000,14],[1426982400000,1],[1427068800000,1],[1427155200000,4],[1427241600000,2],[1427328000000,8],[1427414400000,13],[1427500800000,1],[1427587200000,1],[1428624000000,1],[1429833600000,2],[1436313600000,1],[1458000000000,1],[1458864000000,1],[1465257600000,3]]}]

我用我的替换样本JSON，NVD3 识别关键元素但不识别数据。

我很困惑，因为我使用在线 JSON 格式化程序查看了两个 JSON 文件的结构，但没有发现任何区别。我很确定我犯了一个明显的错误。我将非常感谢社区的反馈！谢谢！

编辑：

我想要实现的图表：

Answer 1

问题是 nvd3 期望的 JSON 是这种形式：

values:[{x:0, y:10},{x:1, y:20} ... ]

您传递的是这种形式

,{"key":"GCC","values":[[1433116800000,1],[1434326400000,2], ...

这就是它不起作用的原因：

FIX: 您需要将 JSON 更改为预期格式：

var myData = [{
    "key": "SSB",
    "values": []
  }, {
    "key": "GEN",
    "values": []
  }, {
    "key": "LYM",
    "values": []
  }, {
    "key": "LUD",
    "values": []
  }, {
    "key": "GCC",
    "values": [
      [1433116800000, 1],
      [1434326400000, 2],
      [1434499200000, 2],
      [1434931200000, 1],
      [1435536000000, 1], ...
  //change into the format expected by nvd3
  myData.forEach(function(d){
    d.values = d.values.map(function(value){
      return {x:value[0], y:value[1]};
    })
  });

工作代码here

NVD3 的实时代码示例不接受我的JSON

Live code examples of NVD3 does not accept my JSON

json

d3.js

nvd3.js