我不是JavaScript专家,我试图使用csv文件中的数据将简单的饼图放在一起。饼图及其输入数据的示例代码如下所示,它完美地运行。
var pie = new d3pie("pie", {
header: {
title: {
text: "A Very Simple Pie",
fontSize: 30
}
},
data: {
content: [
{ label: "JavaScript", value: 264131 },
{ label: "Ruby", value: 218812 },
{ label: "Java", value: 157618}
]
}
});
但是当我尝试使用csv文件中的数据时。它说没有提供数据。我显然试图将动态数据传递给data.content
,但似乎我没有正确地做到这一点。以下是我的代码:
var input_data = []
d3.csv("data.csv", function (data) {
input_data.push({
label: data["First"],
value: +data["Age"]
});
});
console.log(input_data); // This shows [{label: "james", value:30},{"John",value:22}]
var pie = new d3pie("pie", {
header: {
title: {
text: "Simple Pie",
fontSize: 30
}
},
data: {
content: input_data
}
});
知道我在这里做错了什么吗?
正如我的评论中所指出的,你的问题是因为d3.csv
是异步的,当input_data
试图创建你的图表时,d3pie
没有填充。
在其他例子中,input_data
有一些非常可疑的事情 - 应该在data
中为每个项目调用它,但似乎只被调用一次。而不是使用input_data
来整理中间结果,使用javascript's map
function将csv数据转换为您想要的格式要容易得多:
d3.csv("data.csv", function (data) {
var pie = new d3pie("pie", {
header: {
title: {
text: "Simple Pie",
fontSize: 30
}
},
data: {
content: data.map( function(d){
return { label: d['First'], value: +d['Age'] }
})
}
});
});
map
迭代一个数组并生成一个数组作为输出,因此它比创建推送数据等的额外数组更清晰,更容易。
你可能想把你的d3pie
代码放在你的回调函数中,因为你想在数据返回后调用它(参见this example):
var input_data = []
d3.csv("data.csv", function (data) {
input_data.push({
label: data["First"],
value: +data["Age"]
});
console.log(input_data); // This shows [{label: "james", value:30},{"John",value:22}]
var pie = new d3pie("pie", {
header: {
title: {
text: "Simple Pie",
fontSize: 30
}
},
data: {
content: input_data
}
});
});
const promise = d3.csv("data.csv", function (data) {
input_data.push({
'label': data["First"],
'value': +data["Age"]
});
});
promise.then(function(){
var pie = new d3pie("pieChart", {
header: {
title: {
text: "Simple Pie",
fontSize: 30
}
},
data: {
content: input_data
}
});
});