如何正确解析CSV文件以使用SVG元素

时间:2019-06-18 17:10:18

标签: javascript csv d3.js

我第一次使用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)打印出正确的值,所有值都存储为对象。

1 个答案:

答案 0 :(得分:0)

您的数据集是一个对象数组,CSV的标题设置了键。但是,对于x,y,height,颜色属性会将数据集视为数组数组:d是数据集中的一项,如果它是一个对象,那么您应该使用d.year / d.crude / ...而不是d [0] / d [1] / ... –安德鲁·里德

我只需要用点表示法访问对象,而不用访问2D数组。