可視化工具D3.js教程入門（第十一章）—

首先我們先梳理下繪制餅圖之前需要掌握的新知識：

1、d3.arc(arguments..)

　　生成器用來在餅圖或圓環圖中生成圓形或扇形或環形；

　　arguments 是任意的; 它們只是簡單地傳遞到 arc 生成器的訪問器函式的物件，例如，根據默認的設定，傳入的物件應該包含以下半徑和角度資訊:

　　arc({
  　　innerRadius: 0,
  　　outerRadius: 100,
  　　startAngle: 0,
  　　endAngle: Math.PI / 2
　　}); // "M0,-100A100,100,0,0,1,100,0L0,0Z"
　
　好的 不理解沒關系  先往下看

2、d3.pie(data[, arguments…])

　　生成器用來計算一組資料作為餅圖或圓環圖時所需要的角度資訊；這些角度資訊會被傳遞給 arc 生成器生成圖形，

　　根據指定的 data 陣列生成一組物件陣列，其中每個物件包含每個傳入的資料經過計算后的角度資訊，可以包含其他的額外 argements，這些額外的引數會直接被傳遞給當前資料計算后生成的物件或餅圖生成器的訪問器，

　　直白點說d3.pie()就是給d3.arc()提供資料的，

3、arc.centroid(arguments…)

　　計算由給定 arguments 生成的中間點 [x, y]. arguments 是任意的，它們會被傳遞給 arc 生成器的訪問器，為了與生成的弧保持一致，訪問器必須是確定的，

　　例如，相同的引數回傳相同的值，中間點被定義為 (startAngle + endAngle) / 2 和 (innerRadius + outerRadius) / 2，

　　例如:

Circular Sector Centroids Annular Sector Centroids

　　注意，中間點并不是幾何中心，因為幾何中心點可能位于弧之外; 這個方法可以用來方便的對 labels 進行定位，

4、d3.schemeCategory10

　　表示十個分類顏色的陣列,如下圖：

有了上面的補充，那么我們來畫圖，這里先來個D3中文API入口

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pie</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

<svg width="500" height="400"></svg>

</body>

<script>

    //準備資料
    var margin = 30;//邊距
    var data = [56,21,11,85,42,66];//繪制餅圖所需資料
    var svg = d3.select('svg');
    var width = svg.attr('width');
    var height = svg.attr('height');

    //創建一個分組 并設定偏移
    var g = svg.append('g').attr('transform','translate('+ margin +','+ margin +')');

    //為了讓餅圖不同區域顯示不同顏色   我們先創建一個顏色比例尺   用之前我們講到的序數比例尺
    var scaleColor = d3.scaleOrdinal()
        .domain(d3.range(data.length))
        .range(d3.schemeCategory10);

    //創建一個餅圖
    var pie = d3.pie();

    //創建一個弧形生成器
    var arc = d3.arc()
        .innerRadius(0)//設定環的內半徑.
        .outerRadius(100)//設定環的外半徑.
    //除了內半徑與外半徑  還可以設定很多  如下
//        arc.cornerRadius - 設定拐角半徑.
//        arc.startAngle - 設定起始角度.
//        arc.endAngle - 設定終止角度.
//        arc.padAngle - 設定相鄰兩個環之間的間隙角度.
//        arc.padRadius - 設定半徑間隔.
//        arc.context - 設定渲染背景關系.


    //利用pie 轉換資料
    var pieData = pie(data);
    console.log(pieData);//看看轉換成了啥


    //創建扇形分組
    var gs = g.selectAll('.g')
        .data(pieData)
        .enter()
        .append('g')
        .attr('transform','translate('+ width/2 +','+ height/2 +')');


    //繪制扇形
    gs.append('path')
        .attr('d',function (d,i) {

            return arc(d);//給弧形生成器添加資料

        })
        .attr('fill',function (d,i) {
            return scaleColor(i);//給扇形填充顏色
        })


    //繪制文字
    gs.append('text')
        .attr('transform',function (d,i) {
            return 'translate('+ arc.centroid(d) +')';//位置設定在扇形中心處
        })
        .attr("text-anchor","middle")
        .text(function (d,i) {
            return d.data;
        })

</script>

</html>

效果：

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/136686.html

標籤：JavaScript

上一篇：可視化工具D3.js教程入門（第九章）—— 讓圖表動起來

下一篇：可視化工具D3.js教程入門（第十二章）—— 力導向圖

可視化工具D3.js教程 入門 （第十一章）—— 餅圖

可視化工具D3.js教程入門（第十一章）—— 餅圖