D3.js加載csv和json數據

時間 2019-11-13

標籤 d3.js 加載 csv json 數據欄目 JavaScript 简体版

原文原文鏈接

1.加載數據的基本命令

D3提供了方法能夠對不一樣的數據類型進行加載，好比d3.text(), d3.xml(), d3.json(), d3.csv(), 和d3.html().javascript

<!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若是不須要的話可省去。html

2.使用server來server file

在chrome中測試上面的代碼會出現如下錯誤：java

XMLHttpRequest cannot load file:/cities.csv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.node

Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load web

這是由於安全機制禁止了cross origin request，不容許直接讀取本地文件, 因此咱們須要一個webserver來server咱們的數據。chrome

window環境下能夠在cmd中執行以下命令(前提是安裝了npm)npm

nmp install http-server
http-server C:\D3Test

這樣，咱們便啓動了一個server, 瀏覽器訪問http://localhost:8080/index.html，而後即可以在console中看到加載的數據。json

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。