时间戳

首页 > 解决方案 > 如何正确解析 CSV 文件以使用 SVG 元素

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

问题描述

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

标签： javascriptcsvd3.js

解决方案

您的数据集是一组对象，CSV 的标题设置键。但是，对于 x，y，height，color 属性将数据集视为数组数组：d 是数据集中的一个项目，如果它是一个对象，那么您可能应该使用 d.year/d.crude/ ... 而不是 d[0]/d[1]/... – Andrew Reid

我只需要使用点符号来访问对象，而不是如何访问二维数组。

推荐阅读