Is it possible to load csv data to nvd3 library?

问题:

I'm new on nvd3 after testing the D3js the last week. I'd like to load data from .csv file with nvd3, that I did on D3 but I'm not able to do it with nvd3... Someone knows how to do it? With D3 I write the next lines and I get the data from my wather.csv:

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

Considering my weather.csv file like:

"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";
...

On the Nvd3 examples, I've found only variables inside the code, not loading any .csv or .json file. I'd like to load data from a file and show a simple bar chart.

UPDATED

Here I've the code that I implemented and It doesn't work. I use the function .csv from D3 but navigator says that data doesn't exist and I don't know why.

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;
    });
});

Thanks.

回答1:

Finally I got the error on my code. The examples from NVD3.js load the v2 file from D3.js. When we use the 2.x versions from D3 we've to load external data with the next code:

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

After v3 update, this thing changed and appears the error argument, and insinde the .csv function we can control the error case.

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 explained by Mike Bostock, the creator of D3.js

回答2:

You can use all the methods for loading data available in D3 also with nvd3. This example uses the d3.json function to load data. You can simply replace that with d3.csv and add your processing of the data.

回答3:

I've looked into a few nvd3 charts at work.

Basically I convert my CSV into a JSON structure so it could be passed into the structure required by the nvd3 libraries.

I may be wrong, but you could always tinker around the code as you need it, to fit your purpose.