是否可以将 csv 数据加载到 nvd3 库？答案

【问题标题】：Is it possible to load csv data to nvd3 library?是否可以将 csv 数据加载到 nvd3 库？
【发布时间】：2013-04-20 09:56:30
【问题描述】：

在上周测试了 D3js 之后，我是 nvd3 的新手。我想使用 nvd3 从 .csv 文件中加载数据，我在 D3 上做过，但我不能用 nvd3 来做......有人知道怎么做吗？使用 D3，我编写下一行并从我的 wather.csv 中获取数据：

d3.csv("weather.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.Hour);
        d.T = +d.T;
    })
});

考虑到我的 weather.csv 文件，例如：

"Hour";"T";
"25.04.2013 12:00";"18.7";
"25.04.2013 11:00";"18.5";
"25.04.2013 10:00";"18.4";
"25.04.2013 09:00";"18.9";
...

在 Nvd3 示例中，我发现代码中只有变量，没有加载任何 .csv 或 .json 文件。我想从文件中加载数据并显示一个简单的条形图。

更新

这里有我实现的代码，但它不起作用。我使用 D3 中的 .csv 函数，但导航器说数据不存在，我不知道为什么。

var parseDate = d3.time.format("%d.%m.%Y %H:%M").parse;
d3.csv("weather.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.Hour);
        d.T = +d.T;
    })  

    nv.addGraph(function() {  
        //console.log(data);
        var chart = nv.models.discreteBarChart()
            .x(function(d) { return d.date })
            .y(function(d) { return d.T })
            .staggerLabels(true)
            //.staggerLabels(historicalBarChart[0].values.length > 8)
            .tooltips(false)
            .showValues(true);

        d3.select('#chart1 svg')
            //.datum(historicalBarChart)
            .datum(data)
            .transition().duration(500)
            .call(chart);

        nv.utils.windowResize(chart.update);
        return chart;
    });
});

谢谢。

【问题讨论】：

标签： javascript csv d3.js nvd3.js

【解决方案1】：

最后我的代码出现了错误。 NVD3.js 中的示例从 D3.js 加载 v2 文件。当我们使用 D3 的 2.x 版本时，我们必须使用以下代码加载外部数据：

d3.csv("weather.csv", function(data) {
    data.forEach(function(d) {
        d.date = parseDate(d.Hour);
        d.T = +d.T;
    })
});

v3更新后，这个东西发生了变化，出现了error参数，并且在.csv函数中我们可以控制错误情况。

d3.csv("weather.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.Hour);
        d.T = +d.T;
    });
});

Here you can see this changes 由 D3.js 的创建者 Mike Bostock 解释

【讨论】：

我的CSV文件有很多列，“那是X列”和“那是Y列”怎么说？
您应该能够通过您在其顶部为每一列指定的名称访问每一列。即：d.date，d.somethingElseHere

【解决方案2】：

您可以使用 D3 中可用的所有方法加载数据，也可以使用 nvd3。 This example 使用 d3.json 函数加载数据。您可以简单地将其替换为 d3.csv 并添加您对数据的处理。

【讨论】：

但是不是将CSV数据转换成JSON数组用于nvd3吗？，我对此有点困惑。
我已经用我拥有的完整代码更新了代码。也许@shabeer90 是对的，我需要将 csv 转换为 json 吗？
如果data 不存在，则表明加载文件时出现问题。不，不需要额外的转换。一旦数据被加载（来自 CSV 或 JSON 或其他），它就可以作为 Javascript 对象使用。
我已经解决了这个问题！ @LarsKotthoff 你是对的。 Nvd3 读取 csv 但它们加载了 d3.v2.js 文件，并且似乎它不适用于d3.csv()。我现在正在加载 d3.v3.js 并正确加载 csv 数据。
@newpatriks - 你介意分享你的答案吗，将来会有用。

【解决方案3】：

我在工作中查看了一些 nvd3 图表。

基本上，我将我的 CSV 转换为 JSON 结构，以便可以将其传递到 nvd3 库所需的结构中。

我可能错了，但您可以随时根据需要修改代码以符合您的目的。

【讨论】：

我的问题的答案已经写出来了，希望对你有帮助，谢谢！ :)