我第一次使用Javascript和d3.js,作为一个不错的入门项目,我想制作一个条形图。一切正常,但是我使用的数组是在.js文件中声明的,而不是实际上是从单独的文件中导入的。 我正在尝试对我的代码进行改造,以便它从CSV文件中提取数据,而不仅仅是在实际的.js文件中声明一个数组,但是CSV方法将每一行转换为一个对象,这使我的代码如何处理数据我不确定如何解决。有没有办法从CSV中拉出数组,还是最好更改所有内容以更好地与d3.csv()方法配合使用?
到目前为止,我的尝试只是将整个.js函数包装在d3.csv(/Data/data.csv,function(dataset){...}中,我还确保所有数值都是转换为带有forEach循环的数字。
d3.csv("Data/data.csv", function(dataset){
dataset.forEach(function(d){
d.year = +d.year;
d.reported = +d.reported;
d.crude = +d.crude;
d.ageAdj = +d.ageAdj;
});
...some example code that I believe is affected by the error...
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",(d)=>(xScale(d[0])))
.attr("y",(d)=>(yScale(d[2])))
.attr("width",((w-2*pad)/dataset.length)-3)
.attr("height",(d)=>(h-yScale(d[2])-pad))
.attr("fill", function(d){
return colorScale(d[2])
})
.attr("class","bar");
...other code used for formatting graph...
});
运行此错误时,遇到的错误涉及解析x,y和height属性。使用console.log(dataset)打印出正确的值,所有值都存储为对象。
答案 0 :(得分:0)
您的数据集是一个对象数组,CSV的标题设置了键。但是,对于x,y,height,颜色属性会将数据集视为数组数组:d是数据集中的一项,如果它是一个对象,那么您应该使用d.year / d.crude / ...而不是d [0] / d [1] / ... –安德鲁·里德
我只需要用点表示法访问对象,而不用访问2D数组。