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

回答

相關問題