用d3.js画饼状图

最新推荐文章于 2022-12-04 12:59:49 发布

hb707934728

最新推荐文章于 2022-12-04 12:59:49 发布

阅读量1.5k

点赞数

分类专栏：数据可视化之D3.js_学习笔记

本文链接：https://blog.csdn.net/hb707934728/article/details/60963959

版权

本文详细介绍了如何利用d3.js库来绘制饼状图，包括数据准备、设置SVG画布、计算角度、添加切片和标签等步骤，帮助你轻松实现自定义的饼状图表。

摘要由CSDN通过智能技术生成

<html>  
  <head>  
        <meta charset="utf-8">  
        <title>饼状图</title>  
  </head> 

<style>


</style>
    <body>  
		<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
        <script>
		
	var width = 400;
		var height = 400;
		var dataset = [ 30 , 10 , 43 , 55 , 13 ];
		
		var svg = d3.select("body")
					.append("svg")
					.attr("width", width)
					.attr("height", height);
		
		var pie = d3.layout.pie();

		var piedata = pie(dataset);
		
		var outerRadius = 150;	//外半径
		var innerRadius = 5;	//内半径，为0则中间没有空白

		var