Question

在上周测试D3js后，我是nvd3的新手。我想从.csv文件加载nvd3 的数据，我在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;
    });
});

感谢。

Answer 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更新后，这个东西改变并出现了错误参数，并且在.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解释

Answer 2

您可以使用所有方法加载D3中的数据以及nvd3。 This example使用d3.json函数加载数据。您只需将其替换为d3.csv，然后添加您对数据的处理。

Answer 3

我在工作中研究了几张nvd3图表。

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

我可能错了，但你可以随时修改代码，以满足你的目的。

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

3 个答案: