D3.js 弧生成器 (V3版本)

弧生成器(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提供了用於進行這種數據轉換的方法，稱爲佈局。這在之後會給你們進行介紹。