Javascript 是否可以将csv数据加载到nvd3库?
在上周测试了D3js之后,我是nvd3的新手。我想用nvd3从.csv文件加载数据,这是我在D3上做的,但我不能用nvd3。。。有人知道怎么做吗? 使用D3,我写下下几行,然后从wather.csv获取数据:Javascript 是否可以将csv数据加载到nvd3库?,javascript,csv,d3.js,nvd3.js,Javascript,Csv,D3.js,Nvd3.js,在上周测试了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; }) });
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,但navigator说数据不存在,我不知道为什么
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;
});
});
谢谢。您可以使用D3中提供的所有加载数据的方法以及nvd3。使用
d3.json
函数加载数据。您可以简单地将其替换为d3.csv
,并添加您对数据的处理。我在工作中查看了一些nvd3图表
基本上,我将我的CSV转换为JSON结构,以便将其传递到nvd3库所需的结构中
我可能错了,但您可以随时根据需要修改代码,以符合您的目的。最后我得到了代码上的错误。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;
});
});
由D3.js的创建者Mike Bostock解释,但是CSV数据不转换成JSON数组用于nvd3吗,我对此有点困惑。我已经用我拥有的完整代码更新了代码。也许@shabeer90是对的,我需要将csv转换为json吗?如果
数据不存在,则表明加载文件时出现问题。不,不需要额外的转换。一旦数据被加载(从CSV或JSON或任何东西),它就可以作为Javascript对象使用。我已经解决了这个问题@拉斯克托夫,你是对的。Nvd3读取csv,但加载的是d3.v2.js文件,似乎无法与d3.csv()
一起使用。我现在正在加载d3.v3.js并正确加载csv数据。@newpatriks-您介意分享您的答案吗,将来会很有用。我已经为我的问题编写了答案,希望它能帮助您,谢谢!)我的CSV文件有很多列,如何说“那是X列”和“那是Y列”?你应该能够通过你给每列顶部的名称访问每列。例如:d.date
,d.somethingeleshere