如何加载 csv 文件以与 D3 一起使用

Question

我正在尝试了解如何在我的 D3 项目中使用 csv 文件。在这种情况下，我试图在我的数据中为每年创建一个新的 div 。我的代码看起来像这样

d3.csv.parse(d3.select("ballettest.csv").text(), function(d){

    d3.select("body").append("div")
    .text(d.year);

});

我的数据是这样的

year,production,company
1952,A Mirror for Witches (1952),Sadler's Wells Ballet
1937,A Wedding Bouquet (1937),The Vic-Wells Ballet
1946,Adam Zero (1946),Sadler's Wells Ballet
1958,Agon (1958),The Royal Ballet

我以前问过这个问题，但很遗憾遇到了死胡同：我现在收到错误 "d is not defined." 我该如何解决这个问题？

我看过 D3 文档，但仍然掌握了很多概念。我之前使用的是 tsv，但现在我使用的是 csv，因为我读到将其与 plunker 一起使用时会出现问题。

如有更多帮助，将不胜感激，谢谢

Answer 1

尝试将脚本更改为如下内容：

d3.csv("ballettest.csv", function(data){

  d3.select("body").selectAll("div")
    .data(data)
    .enter()
    .append("div")
    .text(function(d){
      return d.year;
    });

});

Answer 2

你可以用一种不那么晦涩的方式来做，就像这样

<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
d3.csv("data.csv", function(error, data) {
    data.forEach(function(d) {
         d3.select("body").append("div").text(d.year);
    });
});
</script>
</head>
</html>

data.csv

year,production,company
1952,A Mirror for Witches (1952),Sadler's Wells Ballet
1937,A Wedding Bouquet (1937),The Vic-Wells Ballet
1946,Adam Zero (1946),Sadler's Wells Ballet
1958,Agon (1958),The Royal Ballet

如何加载 csv 文件以与 D3 一起使用

How to load csv file to use with D3

csv

d3.js