<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>Test10_D3.js</title> <!-- d3.js的引用要放在Header內 --> <script src="d3/d3.min.js"></script> </head> <body> <!-- D3.js的Scropt語法要放在Body內 --> <script> //新增一個SVG，並設定長、寬 var svg = d3.select("body").append("svg") .attr("width", 800) .attr("height", 800) .append("g") //因為原點座標0,0在左上角，所以必須位移到指定的位置上， //否則會因為在畫圓時，圓心座標在0,0而導致部份圖形被裁切。 //位移就是在原本的座標上加上移動的數值。 .attr("transform", "translate(150,150)"); //定義顏色 var color = d3.scale.ordinal() .range(["#abc5c5","#89a68a","#6b5488","#6a456c"]); //資料 var dd = [10,20,30,40] ; //繪製圖餅圖，必備的三個： //d3.svg.arc() //d3.layout.pie() //.append("path") //利用arc來產生圓形的accessor函數， //函數包含有內、外圓的角度起迄， //內、外圓的半徑 var arc1 = d3.svg.arc() //設定內、外圓形的半徑大小 .outerRadius(100) .innerRadius(0); //建立一個layout pie物件，無排序 var pie = d3.layout.pie() .sort(null) ; var g1 = svg.selectAll("g") .data(pie(dd)) .enter() .append("g") //實際畫圓的方式是以SVG圖形路徑（Path）來繪製 .append("path") //路徑的部份要設定在d屬性中，所以套入arc1函數， //d3.js會依據資料配合arc1函數產出Path所需的路徑 .attr("d", arc1) .style("fill", function(d) { return color(d.data); }); </script> </body> </html>
