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

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



標籤雲

  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.           }  




雷達圖

  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);  




圓餅圖

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

留言

熱門文章