弧生成器(Arc Generator) 弧生成器(Arc Generator)可憑藉起始角度、終止角度、內半徑、外半徑等，生成弧線的路徑，因此在製作餅狀圖、弦圖等圖表時很常用。 有四個訪問器需要謹記:內半徑訪問器innerRadius()、外半徑訪問器outerRadius()、起始角度訪問器sta ...
弧生成器(Arc Generator) 弧生成器(Arc Generator)可憑藉起始角度、終止角度、內半徑、外半徑等，生成弧線的路徑，因此在製作餅狀圖、弦圖等圖表時很常用。 有四個訪問器需要謹記:內半徑訪問器innerRadius()、外半徑訪問器outerRadius()、起始角度訪問器startAngle()、終止角度訪問器endAngle()。各參數的意義如圖:
startAngle和endAngle的單位是弧度，即:0°要用0,180°要用3.1415926(π)。0°的位置在"時鐘零點"處，終止角度是按照順時針旋轉的。outerRadius表示外弧半徑，innerRadius表示內弧半徑，內弧之內的部分不屬於弧的一部分。看代碼:
1 var width = 800;
2 var height = 600;
3
4 var svg = d3.select("#body")
5 .append("svg")
6 .attr("width",width)
7 .attr("height",height)
8
9 //定義一個對象
10 var dataList = {startAngle:0,endAngle:Math.PI * 0.75};
11
12 //創建一個弧生成器
13 var arcPath = d3.svg.arc()
14 .innerRadius(50)
15 .outerRadius(100)
16 //添加路徑
17 svg.append("path")
18 .attr("d",arcPath(dataList))
19 .attr("transform","translate(250,200)")
20 .attr("stroke","black")
21 .attr("stroke-width","3px")
22 .attr("fill","yellow")
dataList是一個對象，成員變數有兩個：startAngle和endAngle。然後，創建一個弧生成器arcPath，設置其內半徑和外半徑訪問器，分別為常量50和100.沒有設置startAngle和endAngle的訪問器。預設使用目標對象中名稱為startAngle和endAngle的變數。最後，添加一個路徑元素，將弧生成器計算所得到的路徑作為屬性d的值。結果如圖:
看見效果圖，有人可能會聯想到這是餅狀圖的一部分。不錯，餅狀圖正是用弧生成器繪製的。只需在數據中多添加幾段弧，令其startAngle和endAngle成首尾相連的形式，合計360°即可。定義餅狀圖的代碼:
1 //定義一個對象
2 var dataList = [
3 {startAngle : 0 , endAngle : Math.PI * 0.6},
4 {startAngle : Math.PI * 0.6 , endAngle : Math.PI},
5 {startAngle : Math.PI , endAngle : Math.PI * 1.7},
6 {startAngle : Math.PI * 1.7 , endAngle : Math.PI * 2}
7 ]
有四段弧，首尾相連，從0到2π。然後，插入足夠數量的路徑元素<path>,分別用弧生成器計算路徑:
1 //創建一個弧生成器
2 var arcPath = d3.svg.arc()
3 .innerRadius(0)
4 .outerRadius(100)
5
6 //定義顏色
7 var color = d3.scale.category10();
8
9
10 //插入足夠數量的路徑元素<path>，分別用弧生成器計算路徑
11 svg.selectAll("path")
12 .data(dataList)
13 .enter()
14 .append("path")
15 .attr("d",function(d){return arcPath(d)})
16 .attr("transform","translate(250,250)")
17 .attr("stroke","black")
18 .attr("stroke-width","3px")
19 .attr("fill",function(d,i){return color(i)})
color是一個序數比例尺，按序列返回顏色。此處是為了給餅狀圖的每段弧上不同的顏色。弧生成器的內半徑被設置為0，表示這是一個中間沒有孔的餅狀圖，如圖：
還需要給每一段弧添加一個標簽文字，先確定文字的位置:arc.centroid()可計算弧的中心位置:
1 svg.selectAll("text")
2 .data(dataList)
3 .enter()
4 .append("text")
5 .attr("transform",function(d){
6 return "translate(250,250)"+"translate("+arcPath.centroid(d)+")" //計算弧的中心位置
7 })
8 .attr("text-anchor","middle")
9 .attr("fill","white")
10 .attr("font-size","18px")
11 .text(function(d){
12 return Math.floor((d.endAngle - d.startAngle)*180/Math.PI)+"°"
13 })
註意粗體字的部分，centroid()的參數是弧對象，返回值是一個二維坐標，其位置是相對於圓心而言的。添加文字之後，效果圖如下, 添加的文字是每段弧對應的角度。
如果知道startAngle和endAngle，可以按以上方法作圖。但是一般不會知道，只會知道更加原始的數據，如：10,20,35.要將其轉換成startAngle和endAngle。才能使用弧生成器來繪製。
D3提供了用於進行這種數據轉換的方法，稱為佈局。這在以後會給大家進行介紹。
