D3.js練習畫圓餅圖的範例

<!DOCTYPE html>
<head> 
  <meta charset="utf-8" />
  <title>Test10_D3.js</title>
  <!-- d3.js的引用要放在Header內 -->
  <script src="d3/d3.min.js"></script>
</head>
<body>
  <!-- D3.js的Scropt語法要放在Body內 -->
  <script>
 //新增一個SVG,並設定長、寬
 var svg = d3.select("body").append("svg")
            .attr("width", 800)
            .attr("height", 800)
            .append("g")
     //因為原點座標0,0在左上角,所以必須位移到指定的位置上,
            //否則會因為在畫圓時,圓心座標在0,0而導致部份圖形被裁切。
            //位移就是在原本的座標上加上移動的數值。
            .attr("transform", "translate(150,150)");

 //定義顏色
 var color = d3.scale.ordinal()
              .range(["#abc5c5","#89a68a","#6b5488","#6a456c"]);

 //資料
 var dd = [10,20,30,40] ; 

 //繪製圖餅圖,必備的三個:
 //d3.svg.arc()
 //d3.layout.pie()
 //.append("path") 

 //利用arc來產生圓形的accessor函數,
 //函數包含有內、外圓的角度起迄,
 //內、外圓的半徑
 var arc1 = d3.svg.arc()
     //設定內、外圓形的半徑大小
            .outerRadius(100)
            .innerRadius(0);  

    //建立一個layout pie物件,無排序
    var pie = d3.layout.pie()
         .sort(null) ;        

    var g1 = svg.selectAll("g")
        .data(pie(dd))
     .enter()
     .append("g")
     //實際畫圓的方式是以SVG圖形路徑(Path)來繪製
     .append("path")
            //路徑的部份要設定在d屬性中,所以套入arc1函數,
     //d3.js會依據資料配合arc1函數產出Path所需的路徑
                   .attr("d", arc1)
                   .style("fill", function(d) {
                  return color(d.data);
      });                             
  </script>
</body>
</html>