使用d3.js绘制花瓣形饼图_js 花瓣统计图

1.为了简单起见，我随机定义了一组数据

const container = [200, 265, 437, 635, 570, 298];
1

2.获取到body中svg的宽和高，生成居中的viewBox

var width = d3.select('svg').attr('width');
var height = d3.select('svg').attr('height');
const svg = d3.select("svg").attr("viewBox", [-width / 2, -height / 2, width, height]);
1
2
3

3.利用d3给出的schemePastel1设置颜色比例尺

var colorScale = d3.scaleOrdinal().domain(d3.range(container.length))
					.range(d3.schemePastel1);

1
2
3

4.制作饼图和弧形生成器，并使用pie()转换数据

var pie = d3.pie(); //创建饼图
var arc = d3.arc()//弧形生成器
			.innerRadius(20)//花蕊的半径
			.outerRadius(Math.min(width, height) / 2-1)
			.cornerRadius(180); //转角
const arcs = pie(container);			
1
2
3
4
5
6

5.创建扇形分组，绘制扇形，给弧形填入数据，并填入颜色（这里的stroke指的是每片花瓣的边缘，所以设置为白色之后可以看到花瓣之间有间隔）

svg.append("g")
	.attr("stroke", "white")
	.selectAll("path")
	.data(arcs)
	.join("path")
	.attr("d", arc)
	.attr("fill", function(d, i) {
		return colorScale(i)
	});
1
2
3
4
5
6
7
8
9

6.如果还想要让各片花瓣之间有一定的距离，可以在arc中额外设置个padAngle()

最终成果如下图所示啦！