快捷導(dǎo)航

D3.js實現(xiàn)餅圖,環(huán)圖,玫瑰圖的繪制

更新時間：2022年11月08日 09:04:11 作者：FinGet

這篇文章主要為大家介紹了如何利用D3.js中的d3.pie和d3.arc實現(xiàn)餅圖、環(huán)圖和玫瑰圖的繪制，文中的實現(xiàn)方法講解詳細，感興趣的可以嘗試一下

餅圖和之前介紹的柱狀圖和折線圖不同，不存在坐標系，也就不會有比例尺的映射。在折線圖的介紹中，我們提到了d3提供了一些圖形構(gòu)造器并了解了一下d3.line以及d3.area，而餅圖會用到另外倆個構(gòu)造方法d3.pie和d3.arc。

d3.pie

d3.pie為給定的數(shù)據(jù)生成一個餅圖，返回一個包含每個數(shù)據(jù)對應(yīng)的弧角的對象數(shù)組。

const data = [
    { name: "外包", value: 3000 },
    { name: "金融", value: 4754 },
    { name: "制造", value: 1120 },
    { name: "咨詢", value: 4032 }
];

const pieData = d3.pie().value((d) => d.value)(data)

console.log(pieData)

data - 當前數(shù)據(jù)
value - 數(shù)據(jù)對應(yīng)的值
index - 弧從零開始的排序索引
startAngle - 開始弧度
endAngle - 結(jié)束弧度
padAngle - 每個弧形間的間距(弧度)

對于對象數(shù)組需要通過value屬性，指定取值對象。也可以通過sort對數(shù)據(jù)進行排序.

d3.area

const arc = d3.arc()
    .innerRadius(0)
    .outerRadius(100)
    .startAngle(0)
    .endAngle(Math.PI / 2);
arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

innerRadius - 內(nèi)邊距
outerRadius - 外邊距
startAngle - 開始弧度
startAngle - 結(jié)束弧度
padAngle - 每個弧形間的間距(弧度)

對比d3.pie返回的數(shù)據(jù)和d3.area的屬性，就可以發(fā)現(xiàn)它們是天生的一對，就該成對出現(xiàn)。

餅圖

了解了de.pie和d3.arc,我們就可以輕松的繪制出餅圖了。點擊查看Demo!

const pieData = d3.pie()
    .value((d) => d.value)
    .sort((a, b) => a.value - b.value)(data);

const arc = d3.arc().innerRadius(0).outerRadius(100);
const color = d3.scaleOrdinal(d3.schemeCategory10);

const arcGroup = svg.append("g")
    .attr("transform", "translate(300, 300)")
    .selectAll("path")
    .data(pieData);

arcGroup.join("path")
    .attr("fill", (d, i) => color(i))
    .attr("d", arc);

這里加了文字說明，本章不做介紹，大家可以查看Demo了解，需要注意一點的是弧度與角度的轉(zhuǎn)換：角度 = 弧度 * 180 / Math.PI。

環(huán)圖

環(huán)圖很簡單，加上內(nèi)邊距就變成了環(huán)圖：

const arc = d3.arc().innerRadius(30).outerRadius(100);

玫瑰圖

玫瑰圖就是餅圖的一種變形，每個數(shù)據(jù)根據(jù)數(shù)值的大小，環(huán)形的半徑不一樣，也就是outerRadius是動態(tài)設(shè)置的。

const allCount = data.reduce((pre, cur) => pre + cur.value, 0);

const roseArc = d3.arc()
    .innerRadius(0)
    .outerRadius((d) => {
        return (d.value / allCount) * 100 + 100;
    });

還可以加一個圓角效果：

const roseArc = d3.arc()
    .innerRadius(0)
    .outerRadius((d) => {
        return (d.value / allCount) * 100 + 100;
    })
    .cornerRadius(16); // 圓角