是否可以加载csv数据到nvd3库？ [英] Is it possible to load csv data to nvd3 library?

问题描述

在上周测试D3js后，我在nvd3上是新的。我想要从.vdv文件加载数据nvd3 ，我做D3，但我不能够用nvd3 ...有人知道如何做到吗？
使用D3我写下面的行，我从我的wather.csv的数据：

  d3.csv weather.csv，function（error，data）{
 data.forEach（function（d）{
 d.date = parseDate（d.Hour）; 
 dT = + dT; 
}）
}）;考虑我的weather.csv文件，如：
 
 
 pre> 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; 
 ... 
  


$ b $ p

在Nvd3示例中， ，不加载任何.csv或.json文件。我想从文件加载数据，并显示一个简单的条形图。

UPDATED

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

  var parseDate = d3.time.format（％d。％m。％Y％H：％M）。 
 d3.csv（weather.csv，function（error，data）{
 data.forEach（function（d）{
 d.date = parseDate（d.Hour）; 
 dT = + dT; 
}）
 
 nv.addGraph（function（）{
 //console.log(data）; 
 var chart = nv.models.discreteBarChart（）
 .x（function（d）{return d.date}）
 .y（function（d）{return dT}）
 .staggerLabels 
 //.staggerLabels(historicalBarChart[0].values.length> 8）
 .tooltips（false）
 .showValues（true）; 
 
 d3。 select（'＃chart1 svg'）
 //.datum(historicalBarChart）
 .datum（data）
 .transition（）。duration（500）
 .call ; 
 
 nv.utils.windowResize（chart.update）; 
 return chart; 
}）; 
}）; 
  

谢谢。

解决方案

最后我得到我的代码的错误。来自NVD3.js的示例从D3.j加载v2文件。当我们使用D3中的2.x版本时，我们要用下面的代码加载外部数据：

  d3.csv weather.csv，function（data）{
 data.forEach（function（d）{
 d.date = parseDate（d.Hour）; 
 dT = + dT; 
}）
}）; 
 

在v3更新后，这个东西改变了，出现了错误参数，并隐藏了.csv函数控制错误情况。

  d3.csv（weather.csv，function（error，data）{
 data.forEach（function（d）{
 d.date = parseDate（d.Hour）; 
 dT = + dT; 
}）; 
}）; 
  

这里你可以看到这个变化由D3.js的创建者Mike Bostock解释

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.

解决方案

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

这篇关于是否可以加载csv数据到nvd3库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！