【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> ~~~