本文介绍如何使用D3.js绘制饼图、环图和玫瑰图。通过d3.pie生成数据，结合d3.arc构建圆弧路径。环图通过设置内半径实现，玫瑰图则动态计算外半径以反映数值大小，并支持添加圆角效果。
与柱状图和折线图不同，饼图不依赖坐标系，因此无需使用比例尺进行映射。在之前的折线图介绍中，我们曾提及D3提供的图形构造器，并简要了解了d3.line以及d3.area。而在绘制饼图时，我们将用到另外两个构造方法：d3.pie和d3.arc。
d3.pie
调用d3.pie可以为给定数据生成饼图数据，其返回值是一个包含每个数据对应弧角信息的对象数组。
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- 当前数据value- 数据对应的值index- 弧从零开始的排序索引startAngle- 开始弧度endAngle- 结束弧度padAngle- 每个弧形间的间距(弧度)
对于对象数组，需要通过value属性来指定取值对象。此外，还可以使用sort方法对数据进行排序。
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- 内边距outerRadius- 外边距startAngle- 开始弧度startAngle- 结束弧度padAngle- 每个弧形间的间距(弧度)
对比d3.pie返回的数据结构与d3.arc的属性，可以看出它们是天然配套的，应当成对使用。
饼图
掌握了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了解，需要注意一点的是弧度与角度的转换：角度 = 弧度 * 180 / Math.PI。
环图
环图的实现非常简单，只需在饼图基础上增加内边距即可变为环图：
const arc = d3.arc().innerRadius(30).outerRadius(100);
玫瑰图
玫瑰图是饼图的一种变形，其特点是每个数据根据数值大小，环形的半径不同，即outerRadius是动态设置的。
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); // 圆角
总结
总的来说，饼图的实现相对简单。通过d3.pie处理数据，构造出包含开始和结束弧度的数据，再通过d3.arc构建一个圆弧的path，即可绘制出整个饼图。环图和玫瑰图也只是基于饼图的变形。
到此这篇关于D3.js实现饼图,环图,玫瑰图的绘制的文章就介绍到这了,更多相关D3.js绘制饼图 环图 玫瑰图内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！