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

我之前已经问过这个问题，但不幸的是走到了尽头：How to load tsv file to use with D3 我现在收到错误＆＃34; d未定义。＆＃34;我怎样才能解决这个问题？

我看过D3文档，但我仍然掌握了很多概念。我正在使用tsv，但是现在正在使用csv，因为我读到了有关使用plunker的问题。

非常感谢任何帮助，谢谢

Answer 1

你可以用不那么模糊的方式来做，比如

<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

Answer 2

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

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

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

});

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

2 个答案: