d3.js简单饼状图.docx

D3.js简单饼状图带文字描述代码：一：引入jq库和d3.js库scriptsrc=”//jquery-1.11.1.js/scriptscriptsrc=”//d3.min.js/scriptscript src=”//visualization.js/script（自创文件）二：代码1.Html页面代码：div id=”visualSvg”div class=”pieprompt”/div!—提示框--/divdiv class=visualPromptLeft ul class=markedwords /ul/div2.建一个名为visualization.js文件（名称自取，注意页面引用） 文件内容：//标准饼图function pieSvg(){ $(#visualSvgsvg).remove();var data=[ { id:1, name:直接访问, num:14 }, { id:2, name:邮件营销, num:14 }, { id:3, name:联盟广告, num:10 }, { id:4, name:视频广告, num:5 }, { id:5, name:有哪些信誉好的足球投注网站引擎, num:57 } ]; //饼状图var color = d3.scale.category20c();var dataset=[]; for(var i=0;idata.length;i++){dataset.push(data[i].num); }var width = 400;//svg的宽var height = 300;//svg的高var w=document.getElementById(visualSvg).clientWidth;varsvg = d3.select(#visualSvg) .append(svg) .attr(width, width) .attr(height, height) .style(margin-left,(w-width)/2+px) .style(margin-top,30+px) //画一个背景图svg.append(g) .attr(class,bgcircle) .attr(transform,translate(+ (width/2) +,+ (height/2) +)) .append(circle) .attr(r,110) .style(opacity,1.0) .attr(fill,#f7f7f7) .attr(stroke-width,1) .attr(stroke,#e3e3e3);var pie = d3.layout.pie().sort(null); //定义饼图的布局varpiedata = pie(dataset); //将数据传给pie,就可以得到绘图的数据var piedata1=pie(dataset)varouterRadius = 100; //外半径varinnerRadius = 0; //内半径，为0则中间没有空白var sum=0;piedata.forEach(function(d,i){ d._endAngle=d.endAngle;d.endAngle=d.startAngle;d.duration=1000*(d.data/d3.sum(dataset));//动画时长2秒，计算每一个弧形所用动画时间d.delaytime=sum; sum+=d.duration; })var arc = d3.svg.arc() //弧生成器 .innerRadius(innerRadius) //设置内半径 .outerRadius(outerRadius); //设置外半径var arcs = svg.selectAll(.piearcs) //先添加五个分组元