10-D3.js饼图

一、饼状图

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