将CSV加载到NVD3中以制作离散条形图

loading csv into nvd3 to make discrete bar chart

本文关键字：条形图 CSV 加载 NVD3      更新时间：2023-09-26

我有以下CSV文件：

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

我想将其加载到 nvd3 中以制作离散条形图。我知道这很容易，但要花很长时间来操纵数据。

我尝试了以下方法：

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

我得到以下不适用于 nvd3 的对象：

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

谢谢。

nvd3 需要一个相当具体的数据形式，所以你需要把你的数据变成那个形式。 它期望的形式是：

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

其中空数组由 d3 中的对象填充.csv请注意，nv 期望对象数组的名称称为值。

所以第一步是创建一个空对象，如下所示：

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

然后用您的数据填充它：

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

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

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

标签、值

乐趣， 50

愚蠢，-20

这是一个工作示例的链接

相关文章：