javascript - 是否可以使用这些数据在 nvd3.js 中生成图表？

Question

我有一个小函数，输出以下内容:

[
    {
        "label": "A",
        "value": 101.23
    },
    {
        "label": "B",
        "value": 109.87
    },
    {
        "label": "C",
        "value": 107.34
    },
    {
        "label": "D",
        "value": 115.17
    },
    {
        "label": "E",
        "value": 119.61
    }
]

我正在尝试使用该数据生成图表，但失败了。我想用 nvd3 或 d3 生成一个简单的条形图。

我拥有的是这样的:

var output = [];

Object.keys(input.Data).forEach(function(key){
    if(key.indexOf('mean') > -1){
    output.push({label: key,value: input.Data[key]});
    }
});

nv.addGraph(function() {
    var chart = nv.models.discreteBarChart()
        .x(function (d) {return d.label})
        .y(function (d) {return d.value})


    d3.select('#chart svg')
        .datum(output)
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

我收到类型错误:无法读取未定义的属性“长度”。

我对 nvd3 或 d3 不太熟悉，无法找到此问题，但这可能与版本不匹配有关。我正在使用 d3 v3.5.1 和 nvd3 v1.8.3。不过只是猜测。

非常感谢任何帮助。

Answer 1

数据必须采用这种格式。

output = [{
  key: "",
  values: [{
    "label": "A",
    "value": 101.23
  }, {
    "label": "B",
    "value": 109.87
  }, {
    "label": "C",
    "value": 107.34
  }, {
    "label": "D",
    "value": 115.17
  }, {
    "label": "E",
    "value": 119.61
  }]
}]

工作代码here