[D3.js] 圓餅圖

D3.js 可以很輕易的繪製圓餅圖出來，就用範例來說明。

view plaincopy to clipboardprint

1. //Width and height   
2.             var w = 300;   
3.             var h = 300;   
4.             //資料   
5.             var dataset = [ 5, 10, 20, 45, 6, 25 ];   
6.   
7.             var outerRadius = w / 2;   
8.             //如果大於0就會是甜甜圈   
9.             var innerRadius = 0;   
10.             var arc = d3.svg.arc()   
11.                             .innerRadius(innerRadius)   
12.                             .outerRadius(outerRadius);   
13.                
14.             var pie = d3.layout.pie();   
15.                
16.             //Easy colors accessible via a 10-step ordinal scale   
17.             var color = d3.scale.category10();   
18.   
19.             //Create SVG element   
20.             var svg = d3.select("body")   
21.                         .append("svg")   
22.                         .attr("width", w)   
23.                         .attr("height", h);   
24.                
25.             //Set up groups   
26.             var arcs = svg.selectAll("g.arc")   
27.                           .data(pie(dataset))   
28.                           .enter()   
29.                           .append("g")   
30.                           .attr("class", "arc")   
31.                           .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");   
32.                
33.             //Draw arc paths   
34.             arcs.append("path")   
35.                 .attr("fill", function(d, i) {   
36.                     return color(i);   
37.                 })   
38.                 .attr("d", arc);   
39.                
40.             //Labels   
41.             arcs.append("text")   
42.                 .attr("transform", function(d) {   
43.                     //設定文字在各區塊中央   
44.                     return "translate(" + arc.centroid(d) + ")";   
45.                 })   
46.                 .attr("text-anchor", "middle")   
47.                 .text(function(d) {   
48.                     return d.value;   
49.                 });  

若要調整 label 位置，則可設定 var labelr = r+20;
並在設定位置時根據原本算出來的中心點調整
var c = arc.centroid(d),
x = c[0],
y = c[1],
h = Math.sqrt(x*x + y*y);
return "translate(" + (x/h * labelr) + ',' +
(y/h * labelr) + ")";
完整範例在此

view plaincopy to clipboardprint

1. var dataset=[{"id":"1","map":"tw","count":530,"badge":73,"name_tw":"\u53f0\u7063","name_cn":"\u53f0\u6e7e\u9ad8\u6821","name_jp":"\u53f0\u6e7e\u9ad8\u6821","name_en":"Taiwan"},{"id":"2","map":"hk","zoom":"11","zoom_m":"11","count":426,"badge":20,"name_tw":"\u9999\u6e2f","name_cn":"\u9999\u6e2f","name_jp":"\u9999\u6e2f","name_en":"Hong Kong","lng":"114.154602","lat":"22.354245"},{"id":"3","map":"jr","count":782,"badge":17,"name_tw":"\u53f0\u7063\u570b\u4e2d","name_cn":"\u53f0\u6e7e\u4e2d\u5b66","name_jp":"\u53f0\u6e7e\u4e2d\u5b66","name_en":"Taiwan Junior High School"},{"id":"4","map":"my","count":203,"badge":41,"name_tw":"\u99ac\u4f86\u897f\u4e9e","name_cn":"\u9a6c\u6765\u897f\u4e9a","name_jp":"\u30de\u30ec\u30fc\u30b7\u30a2","name_en":"Malysia"},{"id":"5","map":"bn","count":18,"badge":50,"name_tw":"\u6c76\u840a","name_cn":"\u6587\u83b1","name_jp":"\u30d6\u30eb\u30cd\u30a4","name_en":"Brunei"},{"id":"6","map":"sg","count":63,"badge":65,"name_tw":"\u65b0\u52a0\u5761","name_cn":"\u65b0\u52a0\u5761","name_jp":"\u30b7\u30f3\u30ac\u30dd\u30fc\u30eb","name_en":"Singapore","lng":"103.806496","lat":"1.349736"},{"id":"7","map":"mo","count":43,"badge":70,"name_tw":"\u6fb3\u9580","name_cn":"\u6fb3\u95e8","name_jp":"\u30de\u30ab\u30aa","name_en":"Macau"},{"id":"8","map":"id","count":21,"badge":71,"name_tw":"\u5370\u5c3c","name_cn":"\u5370\u5c3c","name_jp":"\u30a4\u30f3\u30c9\u30cd\u30b7\u30a2","name_en":"Indonesia"}]   
2.   
3. //Width and height   
4.       var w = 600;   
5.       var h = 400;   
6.       var r = Math.min(w, h) / 3;   
7.       var labelr = r+20;   
8.   
9.       var outerRadius = h / 3;   
10.       var innerRadius = 0;   
11.       var arc = d3.svg.arc()   
12.               .innerRadius(innerRadius)   
13.               .outerRadius(outerRadius);   
14.          
15.       var pie = d3.layout.pie().value(function(d) { return d.count; }).sort( function(d) { return null; } );;   
16.          
17.       //Easy colors accessible via a 10-step ordinal scale   
18.       var color = d3.scale.category10();   
19.   
20.       //Create SVG element   
21.       var svg = d3.select("#piechart")   
22.             .append("svg")   
23.             .attr("width", w)   
24.             .attr("height", h);   
25.          
26.       svg.append("g")   
27.   .attr("class", "labels");   
28.       //Set up groups   
29.       var arcs = svg.selectAll("g.arc")   
30.               .data(pie(dataset))   
31.               .enter()   
32.               .append("g")   
33.               .attr("class", "arc")   
34.               .attr("transform", "translate(" + w/3 + "," + h/2 + ")");   
35.          
36.       //Draw arc paths   
37.       arcs.append("path")   
38.           .attr("fill", function(d, i) {   
39.             return color(i);   
40.           })   
41.           .attr("d", arc);   
42.   
43.           arcs.append("text")   
44.           .attr("x", 240)   
45.           .attr("y", function(d, i){   
46.             return i*24-100;   
47.           })   
48.           .attr("fill", function(d, i) {   
49.             return color(i);   
50.           })   
51.           .text(function(d, i) {   
52.             return d.data.name_tw+": "+d.data.count;   
53.           });   
54.       //Labels   
55.       arcs.append("text")   
56.           .attr("transform", function(d) {   
57.           var c = arc.centroid(d),   
58.               x = c[0],   
59.               y = c[1],   
60.               // pythagorean theorem for hypotenuse   
61.               h = Math.sqrt(x*x + y*y);   
62.           return "translate(" + (x/h * labelr) +  ',' +   
63.              (y/h * labelr) +  ")";    
64.           })   
65.           .attr("class", "pie_text")   
66.           .attr("text-anchor", "middle")   
67.           .text(function(d, i) {   
68.             return d.data.name_tw;   
69.           });