d3.js学习笔记（七）—–饼图布局

飞熊 • 2023年7月21日上午11:36 • 技术随笔 • 阅读 188

饼图布局

一、转换数据集

转换后数据集变为：
把数值数组转换成了对象的数组

二、生成路径

任何不是矩形、圆形或其他基本形状的图形都可以用path来绘制
这里用 d3.arc() 生成路径

三、准备分组

为每个要绘制的扇形创建分组（g），把用于生成饼图的数据绑定到这些新元素，并把每个分组平移到图表中心

每个g元素，都追加path元素。路径的相关属性的值都保存在元素d中，所以这里调用arc

四、文本标签

arc.centroid() 负责计算并返回任何弧线的中心点

源代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>饼图</title>
    <script type="text/javascript" src="d3.js"></script>
    <style>

    </style>
</head>

<body>
    <script>
        var w = 300;
        var h = 300;
        var outerRadius = w / 2; //外环半径
        var innerRadius = 0; //内环半径
        var arc = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius);

        var color = d3.scaleOrdinal(d3.schemeCategory10);

        var dataset = [20, 5, 10, 45, 6, 25];
        var pie = d3.pie()
        pie(dataset)

        //创建svg
        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

        //准备分组
        var arcs = svg.selectAll("g.arc")
            .data(pie(dataset))
            .enter()
            .append("g")
            .attr("class", "arc")
            .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

        //绘制扇形
        arcs.append("path")
            .attr("fill", function (d, i) {
                return color(i);
            })
            .attr("d", arc);

        //添加文本
        arcs.append("text")
            .attr("transform", function (d) {
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("text-anchor", "middle")
            .text(function (d) {
                return d.value;
            });
    </script>
</body>
</html>