【d3.js教程05】简单的图标之弧形

首先前面用到了很多的enter(),在这里用一张图片显示

【d3.js教程05】简单的图标之弧形_第1张图片


不解释了哈自己试一试

接下来的内容就要涉及到布局了,什么布局,其实就是数据处理

【d3.js教程05】简单的图标之弧形_第2张图片

相比别的绘图工具,d3对数据的处理做的非常好

我之所以都粘贴所有的代码  就是想完成的让大家自己试一试  我在几乎每一行需要注释的地方都写了注释  辅助大家理解


【d3.js教程05】简单的图标之弧形_第3张图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
			<script src="js/d3.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<svg></svg>
		<script type="text/javascript">
			var svg = d3.select("svg");
				svg.attr("width",1000)
					.attr("height",1000);
			var dataset = [30,10,32,55,13];
			var color = d3.scale.category10();//有十种颜色的颜色比例尺
			var width=500;                    //用来控制圆形原点位置
			/*数据转换*/
			var pie = d3.layout.pie();  //pie可以当函数用了,可不是PI哦
			var piedata = pie(dataset); //piedata就是转换之后的数据
			
			var outerRadius = 150;  //外半径
			var innerRadius = 30;	//内半径,如果为零,中间没有空白
			
			/*弧生成器设置*/
			var arc = d3.svg.arc()
						.innerRadius(innerRadius)
						.outerRadius(outerRadius);
			
			/*给弧生成器绑定数据,设置起点*/
			var arcs = svg.selectAll("g")
						.data(piedata)
						.enter()
						.append("g")
						.attr("transform","translate("+(width/2)+","+(width/2)+")");
			
			/*给弧形添加颜色和分配具体的角度值*/
			arcs.append("path")
				.attr("fill",function(d,i){
					return color(i);           //给路径填充颜色
				})
				.attr("d",function(d){
					return arc(d);              //画路径
				})
			
			/*添加文字信息*/
			arcs.append("text")
				.attr("transform",function(d){
					return "translate("+arc.centroid(d)+")";//这里面的生成的是5个二维数组,对应数据集中的五个数
				})
				.attr("text-anchor","middle") //对齐方式 貌似是  去掉也不影响显示
				.text(function(d){
					return d.data;             //填充数据集中的数据
				})
		</script>
	</body>
</html>



你可能感兴趣的:(d3圆形,d3.js教程,d3入门,d3动态,d3教程)