[英]Load CSV file in DC.JS with D3.csv
I try to use DC.js
, but I don't manage to load an external csv
using d3.csv
. 我尝试使用
DC.js
,但是我无法使用d3.csv
加载external csv
。
Here is the JSfiddle
working (with no external csv
) : http://jsfiddle.net/nicart/6k96mzta/1/ 这是
JSfiddle
工作方式(没有external csv
): http : //jsfiddle.net/nicart/6k96mzta/1/
But I can't call the csv spendData.csv
(host here : https://raw.githubusercontent.com/nicart/DC-js-chart/master/spendData.csv ) I try some code, but i'm new to JS, sorry... I thought this was ok but nothing happened. 但是我无法调用csv
spendData.csv
.csv(托管在这里: https : spendData.csv
)我尝试了一些代码,但是我是新手JS,对不起...我认为还可以,但什么都没发生。
d3.csv('https://raw.githubusercontent.com/nicart/DC-js-chart/master/spendData.csv', function(error, spendData) {
spendData.forEach(function(d) {
d.Spent = d.Spent.match(/\d+/);
});
Is there a possibility to make something like this ? 有可能做出这样的事情吗?
var spendData = d3.csv('https://raw.githubusercontent.com/nicart/DC-js-chart/master/spendData.csv')
Thanks. 谢谢。
There are a couple of mistakes in your code (well, one and a half). 您的代码中有两个错误(一个半错误)。
To begin with, the signature for csv calls for a use like 首先,csv的签名要求使用
d3.csv(file_name, function(data, error) {...
note that data
and error
are reversed in your code. 请注意,代码中的
data
和error
是相反的。
Secondly, if nothing is displayed, you should first put in your callback function stuff like: 其次,如果未显示任何内容,则应首先放入回调函数之类的东西:
console.log(data);
console.log(error);
Check online for the proper way to see these log outputs in your specific browser. 在线检查在您的特定浏览器中查看这些日志输出的正确方法。 Otherwise, debugging Javascript is impossible.
否则,将无法调试Javascript。
Regarding your final question - d3 does not have an API for synchronous loading of CSV (or any other format, for that matter). 关于您的最后一个问题-d3没有用于同步加载CSV(或其他任何格式)的API。 Of course, you're not limited to d3 for loading CSV, but there's a reason it's not included - modern Javascript is increasingly moving away from that stuff, in order to make page responsiveness better.
当然,您不限于d3来加载CSV,但是有一个原因不包含它-为了使页面响应性更好,现代Javascript越来越远离这种东西了。
Thanks to Ami Tavory I manage to load external CSV. 多亏了Ami Tavory,我才能加载外部CSV。 I pull in the
我把
d3.csv("spendData.csv", function(error, spendData) {
console.log(error);
console.log(spendData);
// normalize/parse data
spendData.forEach(function(d) {
After the {
I add all the rest of the script, so it render like this : 在
{
之后,我添加了脚本的其余所有内容,因此它呈现为:
d3.csv("spendData.csv", function(error, spendData) {
console.log(error);
console.log(spendData);
// normalize/parse data
spendData.forEach(function(d) {
d.Spent = d.Spent.match(/\d+/);
});
// set crossfilter
var ndx = crossfilter(spendData),
yearDim = ndx.dimension(function(d) {return +d.Year;}),
spendDim = ndx.dimension(function(d) {return Math.floor(d.Spent/10);}),
nameDim = ndx.dimension(function(d) {return d.Name;}),
spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}),
spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;}),
spendHist = spendDim.group().reduceCount();
yearRingChart
.width(200).height(200)
.dimension(yearDim)
.group(spendPerYear)
.innerRadius(50);
spendHistChart
.width(300).height(200)
.dimension(spendDim)
.group(spendHist)
.x(d3.scale.linear().domain([0,10]))
.elasticY(true);
spendHistChart.xAxis().tickFormat(function(d) {return d*10}); // convert back to base unit
spendHistChart.yAxis().ticks(2);
spenderRowChart
.width(350).height(200)
.dimension(nameDim)
.group(spendPerName)
.elasticX(true);
dc.renderAll();
});
I think it's a dumb thing for developper but it was hard to understand for me. 我认为这对开发人员来说是愚蠢的事情,但对我来说却很难理解。 I update Jsfiddle, but as it is an external CSV it doesn't load, but you'll have the full code if you need ( http://jsfiddle.net/nicart/6k96mzta/3/ ).
我更新了Jsfiddle,但由于它是外部CSV,因此不会加载,但是如果需要,您将拥有完整的代码( http://jsfiddle.net/nicart/6k96mzta/3/ )。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.