d3.js v5 饼状图（加载动画、悬浮动画、图注以及悬浮提示框）

最新推荐文章于 2024-03-12 14:26:53 发布

原创

最新推荐文章于 2024-03-12 14:26:53 发布 · 4k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#d3.js #v5 #饼状图 #动画

本文介绍如何使用d3.js v5库创建带有加载动画、悬浮动画、图注和悬浮提示框的饼状图。通过示例代码展示了具体实现方法，并引用了相关参考资料。

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

实现的效果大概是这样：

实现代码如下：

<html>
	<body></body>
	<style>
		div{
			background: #F2F4FF;
			width: 100px;
			height: 40px;
			position: absolute;
			opacity: 0;
			text-align: center;
			font-size: 12px;
			line-height: 40px;
		}
	</style>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>
		// 数据准备
		let data = [{label: '下下等', num: 5},{label: '下等', num: 10},{label: '哈等', num: 10},{label: '和等', num: 10}, {label: '中低等', num: 38}, {label: '高等', num: 98}, {label: '哟等', num: 11}, {label: '中上等', num: 60}, {label: '中等', num: 50}, {label: '上等', num: 80}];
		let marge = {top: 0, right: 60, bottom: 60, left: 0};
		let width = 1000, height = 800;
		// 弧形生成器内、外半径
		let innerRadius = 0, outerRadius = 150;
		let svg = d3.select('body').append('svg').attr('width', width).attr('height', height);
		let g = svg.append('g').attr('transform', 'translate(' + marge.left + ',' + marge.top  + ')');
		
		// 颜色比例尺
		let colorScale = d3.scaleOrdinal().domain(d3.range(data.length))
			.range(d3.schemeCategory10);
		// 创建饼状图
		let pie = d3.pie().value(function(d) {return d.num}).sort(null);
		
		// 创建弧形生成器
		let arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);
		let arc2 = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius + 30);
		// 饼状图生成器转换数据
		let pieData = pie(data);
		// 排序
		//pie