Vue + D3 动态可视化图实现之四：甜甜圈（饼状，环形）图

本文链接：https://blog.csdn.net/Altair_alpha/article/details/113742493

本文介绍了通过甜甜圈图深入剖析了全球10个最具影响力恐怖组织的攻击手段、目标、武器和地点，以攻击次数为指标，用红蓝渐变区分数据，关键信息以文本标注形式展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GTD数据分析及可视化项目的第四张图表，项目总体介绍见这篇文章。

最终效果

在这里插入图片描述
这张图的分析内容是影响比较严重的10个恐怖组织的详细信息统计，包括攻击手段，攻击目标，攻击武器和攻击地点，指标为攻击次数，以甜甜圈图形式呈现。左上和右下两张图从多到少染色为红到栏，右上和左下则为蓝到红，视觉效果比较好。每个指标的前两到三名会以文字标注内容，指标值和百分比。

实现

因为只统计10个组织，而且指标值仅为攻击次数，数据量较小，故数据表中直接用文字表示。
在这里插入图片描述
数据处理很简单，根据gname筛选即可。主要来看怎么画图。

画图主函数，四张图分别对应数据表中type为1,2,3,4的数据，中心位置为宽高的四分之一，四分之三点，画图模式两张为红到蓝，两张为蓝到红。

			draw: function() {
   
				svg.selectAll('*').remove()
				this.drawSingle(1, [width / 4, height / 4], 'Red2Blue')
				this.drawSingle(2, [width * 3 / 4, height / 4], 'Blue2Red')
				this.drawSingle(3, [width / 4, height * 3 / 4], 'Blue2Red')
				this.drawSingle(4, [width * 3 / 4, height * 3 / 4], 'Red2Blue')
			},

drawSingle函数，先筛选type，然后transform到对应位置，用d3.pie，d3.arc实现数据转换和环形图绘制，并染上红到蓝或蓝到红的颜色。在0.5到0.8半径的环形外圈，再做一个0.9半径的弧，用于定位提示线的转折点。

			drawSingle: function(type, offset, colorType) {
   

				let singleData = data.filter(d => d.type == type)

				let g = svg.append("g")
					.attr("transform", "translate(" + offset[0] + "," + offset[1] + ")");

				var pie = d3.pie()
					.padAngle(0.005)
					.sort(