一、饼状图
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
