[D3.js] 標籤雲(tag cloud), 雷達圖(radar), 圓餅圖(pie chart)
介紹一些最近用到的 D3 工具,可以很輕鬆就把圖表畫出來。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhClbD5N7Lk1G7onO3z4JDyvtDQxbo5ECtspm_xMlV1I3p7Ai4akjfQoilzVCPcbJd3Mw32aCgdY9DWJlM_di9A5AWSBPkp7MGMCt_lus1zj05MwfTeVf3uELNWA_a4DZszHa5q9HNezS3s/s1600-rw/tag_cloud.png)
標籤雲
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqu-4171sHHiXzccpPSKJmV5hfF4ZC0j1Ldiv6XEggKs9woVf-XaiRyyFr70aPhN1J-HGDvmyADu38iuKd7iB_TWEF8_LQEDvLZTXrS9xWDJ905VC0JfWpvh1vhxzD0JedFaeTLSDHSbTt/s1600-rw/radar.png)
雷達圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvJCScG5qCroOsjd8kZQnyXp0v_KQbSRcrh6PBWr6N9cVLEqZI2dOIHv7av7K9CG7Haqi5s_-DYNDMdlsHLE2Rtg1nbMlrk_64eDjd0NrA30BiJj6iMXrdNEXHTYTCLGQt0e6W2tEh8Q_Z/s1600-rw/pie.png)
圓餅圖
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhClbD5N7Lk1G7onO3z4JDyvtDQxbo5ECtspm_xMlV1I3p7Ai4akjfQoilzVCPcbJd3Mw32aCgdY9DWJlM_di9A5AWSBPkp7MGMCt_lus1zj05MwfTeVf3uELNWA_a4DZszHa5q9HNezS3s/s1600-rw/tag_cloud.png)
標籤雲
- var fill = d3.scale.category20();
- d3.layout.cloud().size([500, 300])
- .words([
- ".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) {
- return {text: d, size: 10 + Math.random() * 50};
- }))
- .rotate(function() { return ~~(Math.random() * 2) * 90; })
- .font("Impact")
- .fontSize(function(d) { return d.size; })
- .on("end", draw)
- .start();
- function draw(words) {
- d3.select("#tag").append("svg")
- .attr("width", 500)
- .attr("height", 300)
- .append("g")
- .attr("transform", "translate(250,150)")
- .selectAll("text")
- .data(words)
- .enter().append("text")
- .style("font-size", function(d) { return d.size + "px"; })
- .style("font-family", "Impact")
- .style("fill", function(d, i) { return fill(i); })
- .attr("text-anchor", "middle")
- .attr("transform", function(d) {
- return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
- })
- .text(function(d) { return d.text; });
- }
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqu-4171sHHiXzccpPSKJmV5hfF4ZC0j1Ldiv6XEggKs9woVf-XaiRyyFr70aPhN1J-HGDvmyADu38iuKd7iB_TWEF8_LQEDvLZTXrS9xWDJ905VC0JfWpvh1vhxzD0JedFaeTLSDHSbTt/s1600-rw/radar.png)
雷達圖
- var data = [
- {
- axes: [
- {axis: "strength", value: 6},
- {axis: "intelligence", value: 7},
- {axis: "charisma", value: 10},
- {axis: "dexterity", value: 13},
- {axis: "luck", value: 9}
- ]
- }
- ];
- RadarChart.draw("#radar-chart", data);
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvJCScG5qCroOsjd8kZQnyXp0v_KQbSRcrh6PBWr6N9cVLEqZI2dOIHv7av7K9CG7Haqi5s_-DYNDMdlsHLE2Rtg1nbMlrk_64eDjd0NrA30BiJj6iMXrdNEXHTYTCLGQt0e6W2tEh8Q_Z/s1600-rw/pie.png)
圓餅圖
- $pieData={
- content: [
- { label: "11-20", value: 0.1 },
- { label: "21-30", value: 0.56 },
- { label: "31-40", value: 0.12 },
- { label: "41-50", value: 0.4 },
- { label: "51-60", value: 0.51 },
- { label: "> 60", value: 0.2 }
- ]
- }
- var pie = new d3pie("pie", {
- data: $pieData,
- size: {
- canvasHeight: 300,
- canvasWidth: 300,
- }
- });
留言