d3.js使用访问器函数和回调导入csv

我想了解如何使用官方API文档中指定的访问器和回调函数来使用d3.csv（url [，accessor] [，callback]）（请参阅点1的链接）。免责声明：我是d3.js的新手。d3.js使用访问器函数和回调导入csv

TL，WR：在调用console.log（data）命令时，我在回调函数中得到一个空的控制台响应，并在应该保存数据的变量上调用console.log时得到未定义。

我发现了两个简单的例子来了解它是如何工作的。

API本身有一个例子：Chart-data at tonygarcia.me

要执行这些我已经创建既为代码的HTML文件，然后使用一个CSV文件：d3.js API at github.com

在tonygarcia.me一个简单的例子数据，然后用命令python -m SimpleHTTPServer 8888 &启动一个简单的服务器。

案例1：API官方文档。

在HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"> 
    </script> 
    </head> 
    <body> 
    <script type="text/javascript"> 
     var datas; 
     d3.csv("example.csv", function(d) { 
     return { 
      year: new Date(+d.Year, 0, 1), // convert "Year" column to Date 
      make: d.Make, 
      model: d.Model, 
      length: +d.Length // convert "Length" column to number 
     }; 
     }, function(error, rows) { 
     console.log(rows); 
     datas = rows; 
     }); 
    </script> 
    </body> 
</html>

的CSV（example.csv）：

Year,Make,Model,Length 
1997,Ford,E350,2.34 
2000,Mercury,Cougar,2.38

在控制台上的输出（空），然后：

> console.log(datas); 
undefined              VM2228:2 
undefined

预期结果：

[ 
    {"Year": "1997", "Make": "Ford", "Model": "E350", "Length": 2.34}, 
    {"Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": 2.38} 
]

情况2：图表数据在tonygarcia.me

在HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"> 
    </script> 
    </head> 
    <body> 
    <script type="text/javascript"> 
     var datas; 
     // load data from a CSV file 
     d3.csv('home.csv', 
     function(d) { 
      return { 
      key: d.state, 
      value: +d.value 
      }; 
     }, function(dataset){ 
      // code to generate chart goes here 
      datas = dataset; 
      console.log(dataset); 
     }); 
    </script> 
    </body> 
</html>

的CV（home.cvs）：

state,value 
Alabama,71.6 
Alaska,22.4 
Arizona,147.5 
Arkansas,59.9 
<truncated>

在控制台上的输出（空）然后：

> console.log(datas); 
undefined               VM2265:2 
undefined

预期的结果（你可以尝试在网页上）：

那么，我究竟做错了什么？如果我只使用没有访问器的回调函数，那么一切正常。使用访问器将数据从sting格式化为f.e是很有趣的。数。

谢谢大家的帮助！

最佳，

迈克尔

编辑：更正：tonygarcia.com - > tonygarcia。我

来源

2014-01-08 mgp

我确认你上面说的。复制你的代码和csv，一切和你说的一样。 – VividD

我试着从托尼加西亚网站加载d3.v3.min.js到你的例子，它没有改变任何东西。 – VividD

我也试过，得到了同样的结果。这就排除了版本不兼容的问题，因为我们使用与他相同的d3.js代码。我真的不明白发生了什么事。它可能是关于python服务器吗？ – mgp

这是一个版本问题。 v3的作品，v2没有。

这个代码链接到v2：

<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"> 
</script>

确切地说它的内容是：

document.write("<script src='http://d3js.org/d3.v2.js'></script>");

为了使它工作，我认为这与到最新的版本是这样的：

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"> 
</script>

这解决了主要问题，我会考虑解决问题。（还没有弄清楚Toni Garcia是如何做的，因为我用他的js并且无法让它工作，但这是无关紧要的。）

感谢大家的帮助和抱歉回答我自己的问题。

来源

2014-01-09 15:16:28 mgp

今天不能接受我自己的答案（我是一个没有代表权的noob），但明天会这样做。再次感谢所有！ – mgp

回调应设置像这样：然后

d3.csv("your_file_url.csv", function (error, data) { 
//Here you should put the code for your visualization. 
});

你的第一个例子是：

d3.csv("example.csv", function (error, data) { 
console.log(data) // this will output the data contained in your csv 
});

事实是，该功能d3.csv已经解析数据，因为它得到加载，所以如果你加载example.csv文件，它将被读取，然后像一个值数组一样对待

来源

2014-01-09 00:04:34 tomtomtom

嘿，@tomtomtom，这很好，你写了什么，但他问了d3.csv的另一种味道，有三个参数，为什么这是行不通的，并且有记录。这就是我对他的理解。 – VividD

是的，但要将d.value从字符串更改为值，可以使用dataset.forEach（function（d）{d.value = + d.value;}）轻松完成该操作。我想他问如何正确设置回调 – tomtomtom

感谢您的答案。我的确在寻找VividD所说的话。我同意你可以在回调函数中设置forEach以获得相同的结果，但为什么访问器函数在API文档中明确声明时不起作用。更令人惊讶的是，为什么它在tonygarcia.me网页上完美无缺地工作。 – mgp

d3.js使用访问器函数和回调导入csv

回答

相关问题