d3.js是一個數據可視化庫,常常被用于制作交互式的數據圖表。而d3.json則是其讀取json數據的方法。
d3.json("data.json").then(function(data){
console.log(data);
//處理數據的代碼
}).catch(function(error){
console.log(error);
//處理錯誤的代碼
});
讀取json數據的過程是異步的,因此使用了ES6中的Promise語法,通過then和catch方法處理讀取成功和讀取失敗兩種情況。
讀取成功后的data就是json數據,我們可以直接使用其中的屬性進行操作。比如:
var svg = d3.select("body").append("svg");
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d,i){ return i*50; })
.attr("y", function(d){ return 100-d.height; })
.attr("width", 40)
.attr("height", function(d){ return d.height; })
.attr("fill", function(d){
if(d.height>=70){ return "#ff0000"; }
else{ return "#00ff00"; }
});
以上代碼中,我們根據讀取的json數據創建了一個svg并繪制了一些矩形,矩形的高度和填充顏色都是根據json數據中的屬性來確定的。
通過d3.json讀取json數據,可以方便地將數據與圖表結合起來,展示出更生動、直觀的數據分析結果。
上一篇vue 集成工具框架