[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.           });  

留言

張貼留言