d3.json()是d3.js庫中一個十分重要的函數,它允許我們從外部文件請求數據。在使用該函數前,我們需要確認請求的數據文件是 在本地還是在網絡上。
//從本地文件request.json中請求數據 d3.json("request.json", function(data){ console.log(data); }); //從網絡上的url請求數據 d3.json("http://example.com/request", function(data){ console.log(data); })
在請求到數據之后,我們通常會將數據與網頁元素進行綁定(比如div、table、svg等),以更新網頁上的內容。
//通過d3.json加載數據,并進行數據綁定 d3.json("data.json", function(data) { d3.select("body") .selectAll("p") .data(data) .enter() .append("p") .text(function(d) {return d;}) });
如果我們需要在請求數據時指定請求方法、頭信息、標準參數等,則可以使用d3.request()函數來完成。
以下是一個從GitHub API中請求數據的示例:
d3.request("https://api.github.com/search/repositories") .header("Accept", "application/vnd.github.v3+json") .get({q: "d3.js", sort: "stars"}) .on("load", function(xhr) { var data = JSON.parse(xhr.responseText); //解析響應數據 d3.select("body") .selectAll("p") .data(data.items) .enter() .append("p") .text(function(d) { return d.name; }) });
通過d3.json和d3.request這兩個函數,我們可以自由靈活地請求數據,更新網頁上的內容,從而實現更加豐富、精準、高效的數據可視化。