【D3.js資料視覺化系列教程】(二十五)--載入csv檔案
阿新 • • 發佈:2019-01-30
csv檔案 | 由csv資料生成的圓環 |
---|---|
! |
1. 載入csv資料
用到d3.csv函式,第一個引數是地址,第二個引數是個回撥函式
d3.csv("http://localhost:8080/spring/D3data/food.csv",function(error,data){
if(error){
console.log(error);
} else { //(3)取出其中的數字,和類別名
for(var i=0;i<data.length;i++){
numset.push(parseFloat(data[i].Delicious));
nameset.push(data[i].Food);
}
var pie=d3.layout.pie(numset);// (4)numset轉化資料為適合生成餅圖的物件陣列
// 略,使用載入的資料畫圓環圖
}
});
2. 完整程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testD3-23-loadfile.html</title>
<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js" ></script>
<style type="text/css"></style>
</head>
<body>
<script type="text/javascript">
var numset=[] ;//(1)陣列初始化
var nameset=[] ;//全域性變數方便載入完了使用
//(2)載入csv資料
d3.csv("http://localhost:8080/spring/D3data/food.csv",function(error,data){
if(error){
console .log(error);
}else{
//(3)取出其中的數字,和類別名
for(var i=0;i<data.length;i++){
numset.push(parseFloat(data[i].Delicious));
nameset.push(data[i].Food);
}
// (4)numset轉化資料為適合生成餅圖的物件陣列
var pie=d3.layout.pie(numset);
var h=300;
var w=300;
var outerRadius=w/2;//外半徑
// 圓環內半徑
var innerRadius=w/3;
// 用svg的path繪製弧形的內建方法
var arc=d3.svg.arc()//設定弧度的內外徑,等待傳入的資料生成弧度
.outerRadius(outerRadius)
.innerRadius(innerRadius);
var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
// 顏色函式
var color=d3.scale.category10();//建立序數比例尺和包括10中顏色的輸出範圍
// 準備分組,把每個分組移到圖表中心
var arcs=svg.selectAll("g.arc")
.data(pie(numset))
.enter()
.append("g")
.attr("class","arc")
//移到圖表中心
.attr("transform","translate("+outerRadius+","+outerRadius+")");//translate(a,b)a表示橫座標起點,b表示縱座標起點
// 為組中每個元素繪製弧形路路徑
arcs.append("path")//每個g元素都追加一個path元素用繫結到這個g的資料d生成路徑資訊
.attr("fill",function(d,i){//填充顏色
return color(i);
})
.attr("d",arc);//將角度轉為弧度(d3使用弧度繪製)
// (6)nameset和numset組合生成文字
arcs.append("text")//每個g元素都追加一個path元素用繫結到這個g的資料d生成路徑資訊
.attr("transform",function(d){
return "translate("+arc.centroid(d)+")";//計算每個弧形的中心點(幾何中心)
})
.attr("text-anchor","middle")
.text(function(d,i){
return nameset[i]+":"+d.value;//這裡已經轉為物件了
});
//載入csv回撥函式結束
}
});
</script>
</body>
</html>