Question

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

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

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

API本身有一个例子：d3.js API at github.com
tonygarcia.me上的一个简单示例：Chart-data at tonygarcia.me

为了执行这些，我创建了代码的html文件和带有数据的csv文件，然后使用命令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>

cvs（home.cvs）：

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

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

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

预期结果（您可以在网页上试用）：

[{"key":"Alabama","value":71.6},{"key":"Alaska","value":22.4},     
{"key":"Arizona","value":147.5},{"key":"Arkansas","value":59.9},...]

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

谢谢大家的帮助！

最佳，

编辑：更正：tonygarcia.com - ＆gt; tonygarcia.me

Answer 1

应该像这样设置回调：

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文件，它将被读取然后被视为值数组

Answer 2

这是一个版本问题。 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并且无法使它工作，但这是无关紧要的。）

感谢大家的帮助，对不起回答我自己的问题。

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

2 个答案: