一、餅狀圖
dataset = [5, 10, 20, 45, 6, 25];這樣的值是不能直接繪圖的。例如繪制餅狀圖的一個部分，需要知道一段弧的起始角度和終止角度，這些值都不存在于數組 dataset 中。因此，需要用到布局，布局的作用就是：計算出適合于作圖的數據。
實心餅圖.png
<script src="./package/dist/d3.js"></script>
//Width and height
var w = 300;
var h = 300;
//這樣的值是不能直接繪制圖形的，例如繪制餅圖的一部分，需要知道一段弧度的起始位置和終止角度，這些值都不存在于數組的dataset中，因此需要用到布局
//布局的作用就是：計算出適合于作圖的數據
var dataset = [5, 10, 20, 45, 6, 25];
// 計算總數,如果需要顯示百分比
// var count = dataset.reduce((prev, curr) => { return prev + curr })
var outerRadius = w / 2;
var innerRadius = 0;
// 為了根據轉換后的piedata繪圖，還需要一樣工具：生成器
var arc = d3.arc()//弧生成器
.innerRadius(innerRadius)//設置內外半徑
.outerRadius(outerRadius);
// 轉換成適合畫圖的數據，5 個整數由大到小被轉換成了5個對象 ，每個對象都有變量起始角度（startAngle）和終止角度（endAngle）
var pie = d3.pie();
//定義10種顏色
var color = d3.scaleOrdinal(d3.schemeCategory10);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Set up groups
var arcs = svg.selectAll("g.arc")
.data(pie(dataset))
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
// 給每個g添加path
arcs.append("path")
.attr("fill", function (d, i) {
return color(i);
})
//調用弧生成器，得到路徑值
.attr("d", arc);
//Labels
arcs.append("text")
// 計算環的中心點，中間點被定義為 (startAngle + endAngle) / 2 和 (innerRadius + outerRadius) / 2
.attr("transform", function (d) {
return "translate(" + arc.centroid(d) + ")";
})
// centroid 負責定位到每個圖像的中心
.attr("text-anchor", "middle")
.text(function (d) {
return d.value;
});
我們可以修改
innerRadius這個值，讓 它大于 0。這樣，餅圖就會變成圖空心的圓環圖
空心餅圖.png
