javascript - loading csv into nvd3 to make discrete bar chart

Question

I have the following CSV file:

Fun,Stupid,Yes,No
50,-20,100,70

I'd like to load it into nvd3 to make a discrete bar chart. I know it's easy but it's taking me way to long to manipulate the data.

I've tried the following:

d3.csv("/path/to/file", function(data){
                console.log(data);
                 });

and I get the following object which isn't working with nvd3:

[{Fun:50, Stupid: -20, Yes: 100, No: 70}]

Thanks.

score 3 · Accepted Answer

nvd3 需要一个相当具体的数据表单，因此您需要将数据放入该表单。它期望的形式是：

[
    {
        key: "totals",
        values: []
    }
 ];

其中空数组填充有来自 d3.csv 的对象，请注意 nv期望您的对象数组的名称被称为values。

所以第一步是创建一个像这样的空对象：

var exampleData = [
    {
        key: "totals",
        values: []
    }
];

然后用你的数据填充它：

data.forEach(function (d){
    d.value = +d.value
    exampleData[0].values.push(d)
})

这一切都需要在您的 d3.csv 调用中。

要使用这种格式，您需要将您的 csv 文件组织成列，其中您的名称在一列中，您的值在另一列中，例如：

标签，值

有趣，50

愚蠢，-20

1 回答 1