D3.js以其强大的绘图能力而闻名,今天我们就来用他绘制一个饼图,先来看一下效果图:
下面是实现这个饼图的代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-20-pie.html</title> <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script> <style type="text/css"> </style> </head> <body> <script type="text/javascript"> var dataset = [ 5, 10, 20, 40, 6, 25 ]; //(1)转化数据为适合生成饼图的对象数组 var pie = d3.layout.pie(dataset); var h = 300; var w = 300; var outerRadius = w / 2;//外半径 //(7)圆环内半径 var innerRadius = w / 3; //(2)用svg的path绘制弧形的内置方法 var arc = d3.svg.arc()//设置弧度的内外径,等待传入的数据生成弧度 .outerRadius(outerRadius).innerRadius(innerRadius); var svg = d3.select("body").append("svg").attr("width", w).attr( "height", h); //(3)颜色函数 var color = d3.scale.category10();//创建序数比例尺和包括10中颜色的输出范围 //(4)准备分组,把每个分组移到图表中心 var arcs = svg.selectAll("g.arc").data(pie(dataset)).enter() .append("g").attr("class", "arc") //移到图表中心 .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");//translate(a,b)a表示横坐标起点,b表示纵坐标起点 //(5)为组中每个元素绘制弧形路路径 arcs.append("path")//每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息 .attr("fill", function(d, i) {//填充颜色 return color(i); }).attr("d", arc);//将角度转为弧度(d3使用弧度绘制) //(6)为组中每个元素添加文本 arcs.append("text")//每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息 .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")";//计算每个弧形的中心点(几何中心) }).attr("text-anchor", "middle").text(function(d) { return d.value;//这里已经转为对象了 }); </script> </body> </html>
-----------------------------------------------------
转载请注明来源此处
原地址:#
发表