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

首先前面用到了很多的enter(),在这里用一张图片显示 ![](https://box.kancloud.cn/2016-04-19_57161004bf1cb.jpg) 不解释了哈自己试一试接下来的内容就要涉及到布局了，什么布局，其实就是数据处理 ![](https://box.kancloud.cn/2016-04-19_57161004d952a.jpg) 相比别的绘图工具，d3对数据的处理做的非常好我之所以都粘贴所有的代码就是想完成的让大家自己试一试我在几乎每一行需要注释的地方都写了注释辅助大家理解 ![](https://box.kancloud.cn/2016-04-19_57161004ea2bd.jpg) ~~~ <!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> ~~~