[D3.js] 標籤雲(tag cloud), 雷達圖(radar), 圓餅圖(pie chart)

介紹一些最近用到的 D3 工具，可以很輕鬆就把圖表畫出來。



標籤雲

view plaincopy to clipboardprint

1. var fill = d3.scale.category20();   
2.   
3.           d3.layout.cloud().size([500, 300])   
4.               .words([   
5.                 ".NET", "Silverlight", "jQuery", "CSS3", "HTML5", "JavaScript", "SQL","C#", "php", "JAVA", "AngularJS", "D3.js", "Vue.js", "Python", "node.js", "Android", "iOS", "R", "CodeIgniter", "ruby", "Ruby on Rails", "backbone.js", "MySQL"].map(function(d) {   
6.                 return {text: d, size: 10 + Math.random() * 50};   
7.               }))   
8.               .rotate(function() { return ~~(Math.random() * 2) * 90; })   
9.               .font("Impact")   
10.               .fontSize(function(d) { return d.size; })   
11.               .on("end", draw)   
12.               .start();   
13.   
14.           function draw(words) {   
15.             d3.select("#tag").append("svg")   
16.                 .attr("width", 500)   
17.                 .attr("height", 300)   
18.               .append("g")   
19.                 .attr("transform", "translate(250,150)")   
20.               .selectAll("text")   
21.                 .data(words)   
22.               .enter().append("text")   
23.                 .style("font-size", function(d) { return d.size + "px"; })   
24.                 .style("font-family", "Impact")   
25.                 .style("fill", function(d, i) { return fill(i); })   
26.                 .attr("text-anchor", "middle")   
27.                 .attr("transform", function(d) {   
28.                   return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";   
29.                 })   
30.                 .text(function(d) { return d.text; });   
31.           }  

雷達圖

view plaincopy to clipboardprint

1. var data = [   
2.           {   
3.                 axes: [   
4.                   {axis: "strength", value: 6},    
5.                   {axis: "intelligence", value: 7},    
6.                   {axis: "charisma", value: 10},     
7.                   {axis: "dexterity", value: 13},     
8.                   {axis: "luck", value: 9}   
9.                 ]   
10.               }   
11.             ];   
12.         RadarChart.draw("#radar-chart", data);  

圓餅圖

view plaincopy to clipboardprint

1. $pieData={   
2.             content: [   
3.                 { label: "11-20", value: 0.1 },   
4.                 { label: "21-30", value: 0.56 },   
5.                 { label: "31-40", value: 0.12 },   
6.                 { label: "41-50", value: 0.4 },   
7.                 { label: "51-60", value: 0.51 },   
8.                 { label: "> 60", value: 0.2 }   
9.             ]   
10.         }   
11.         var pie = new d3pie("pie", {   
12.             data: $pieData,   
13.             size: {   
14.                 canvasHeight: 300,   
15.                 canvasWidth: 300,   
16.             }   
17.         });