1.加載數據的基本命令
D3提供了方法可以對不同的數據類型進行加載，比如d3.text(), d3.xml(), d3.json(), d3.csv(), 和d3.html().
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <script type="text/javascript" src="d3.js"></script> </head> <body> <div id="borderdiv"> 123</div> </body> <script> d3.csv("cities.csv", function(data) {console.log(data)}); d3.json("flare.json",function(error,data2) {console.log(error, data2)}); </script> </html>
上面的代碼中加載了一個csv文件和一個json文件，function實際是一個callback，當然其中的error如果不需要的話可省去。
2.使用server來server file
在chrome中測試上面的代碼會出現以下錯誤：
XMLHttpRequest cannot load file:/cities.csv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load
這是因為安全機制禁止了cross origin request，不允許直接讀取本地文件, 所以我們需要一個webserver來server我們的數據。
window環境下可以在cmd中執行如下命令(前提是安裝了npm)
nmp install http-server http-server C:\D3Test
這樣，我們便啟動了一個server, 瀏覽器訪問http://localhost:8080/index.html，然后便可以在console中看到加載的數據。
d3.csv()和d3.json加載數據返回的一個json對象的數組。
3.異步加載
將上面的script部分代碼修改如下：
console.log("before csv ");
d3.csv("cities.csv", function(data) {console.log(data)});
console.log("before json");
d3.json("flare.json",function(error,data2) {console.log(error, data2)});
執行結果如下：
可以看到，實際執行順序和代碼中順序並不符合。原因是d3.csv()和d3.json是異步加載數據的，而加載數據往往比其他操作需要更多的時間。也是由於這樣原因，如果在數據加載完成之間進行數據請求將出現錯誤。
我們有兩種方法可以繞開異步加載的問題
第一種：將數據加載和處理嵌套在一起
d3.csv("somefiles.csv", function(data) {doSomethingWithData(data)});
第二種：使用一些helper類庫（queue.js）來實現在數據加載完成后出發相應的操作。
參考：D3.js in Action