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

来源：互联网发布：2017网络教育多少钱编辑：程序博客网时间：2024/05/29 18:01

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

不解释了哈自己试一试

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

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

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

<!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>

0 0