首页 > 解决方案 > 如何在 d3.js 中引用来自 CSV 的数据

问题描述

我正在从 csv 文件加载数据以创建 D3 图像。

我正在使用 Firefox,因此提供本地文件应该不是问题。

我读取的数据如下:

dataset = d3.csv("movies.csv", function(data){
                  data.forEach(function(d){ 
                  d['imdbRating'] = +d['imdbRating'],
                  d['WinsNoms'] = +d['WinsNoms'],
                  d['Budget'] = +d['Budget'],
                  d['imdbVotes'] = +d['imdbVotes'],
                  d['IsGoodRating'] = +d['IsGoodRating']; });   
                  console.log(data);     
                });

控制台显示正在读取数据。 在此处输入图像描述

我如何访问它?例如,如果我将数据粘贴为 Json 格式,如下所示

dataset = [
    {
    "Id": 13,
    "Title": "Alone in the Dark",
    "Year": 2005,
    "Runtime": 96,
    "Country": "Canada, Germany, USA",
    "imdbRating": 2.3,
    "imdbVotes": 37613,
    "Budget": 20000000,
    "Gross": 8178569,
    "WinsNoms": 9,
    "IsGoodRating": 0
  },
  {
    "Id": 38,
    "Title": "Boogeyman",
    "Year": 2005,
    "Runtime": 89,
    "Country": "USA, New Zealand, Germany",
    "imdbRating": 4.1,
    "imdbVotes": 25931,
    "Budget": 20000000,
    "Gross": 67192859,
    "WinsNoms": 0,
    "IsGoodRating": 0
  };]

我可以使用类似的命令轻松访问它。

d3.max(dataset, function(d) {return d.imdbRating;})

但是,当我对从 .csv 文件读取的数据集变量尝试相同的 d3.max() 命令时,我得到“未定义”。

我将如何对我当前的数据做同样的事情?我哪里错了?

这是一些存储在名为“movies.csv”的文件中的示例数据

Id,Title,Year,Runtime,Country,imdbRating,imdbVotes,Budget,Gross,WinsNoms,IsGoodRating 13,Alone in the Dark,2005,96,"Canada, Germany, USA",2.3,37613,20000000,8178569,9, 0 38,Boogeyman,2005,89,"美国,新西兰,德国",4.1,25931,20000000,67192859,0,0 52,Constantine,2005,121,"美国,德国",6.9,236091,75000000,221594911 ,11,1 62,疯狂黑人妇女日记,2005,116,USA,5.6,10462,5500000,50458356,26,0 83,Fever Pitch,2005,104,“美国,德国”,6.2,36198,40000000 ,50071069,9,1 86,四十度蓝,2005,108,USA,6,1135,1500000,172569,3,1 94,Guess Who,2005,105,USA,5.9,33846,35000000,102115888,16 ,1 103,捉迷藏,2005,101,"美国,德国",5.9,70185,25000000,123696741,6,0 105,Hitch,2005,118,USA,6.6,244830,55000000,366784257,28,1 108,蜡像馆,2005,108,”澳大利亚,美国”,5.3,94338,35000000,70064800,15,0 153,Monster-in-Law,2005,101,"Germany, USA",5.5,43005,45000000,155931301,11,0 247,Wolf Creek,2005,99,Australia,6.3,55818,1100000,29005064,27 ,1 265,50 First Dates,2004,99,USA,6.8,264192,75000000,196324496,15,1 285,Against the Ropes,2004,111,"USA, Germany",5.3,5890,39000000,6429865,0 ,0 294,Alfie,2004,103,"UK, USA",6.2,43411,40000000,35195939,13,1 301,Along Came Polly,2004,90,USA,5.9,106798,42000000,173044410,9,0 315,水蟒:血兰花的狩猎,2004,97,美国,4.6,22226,25000000,70326393,1,0"UK, USA",6.2,43411,40000000,35195939,13,1 301,Along Came Polly,2004,90,USA,5.9,106798,42000000,173044410,9,0 315,Anacondas: The Hunt for the Blood Orchid ,2004,97,美国,4.6,22226,25000000,70326393,1,0"UK, USA",6.2,43411,40000000,35195939,13,1 301,Along Came Polly,2004,90,USA,5.9,106798,42000000,173044410,9,0 315,Anacondas: The Hunt for the Blood Orchid ,2004,97,美国,4.6,22226,25000000,70326393,1,0

标签: arraysd3.js

解决方案


推荐阅读