征途导航仪官网,大化网,空港大亨
1 var width = 800; 2 var height = 600; 3 4 var svg = d3.select("#body") 5 .append("svg") 6 .attr("width",width) 7 .attr("height",height) 8 9 //定义一个对象 10 var datalist = {startangle:0,endangle:math.pi * 0.75}; 11 12 //创建一个弧生成器 13 var arcpath = d3.svg.arc() 14 .innerradius(50) 15 .outerradius(100) 16 //添加路径 17 svg.append("path") 18 .attr("d",arcpath(datalist)) 19 .attr("transform","translate(250,200)") 20 .attr("stroke","black") 21 .attr("stroke-width","3px") 22 .attr("fill","yellow")
1 //定义一个对象 2 var datalist = [ 3 {startangle : 0 , endangle : math.pi * 0.6}, 4 {startangle : math.pi * 0.6 , endangle : math.pi}, 5 {startangle : math.pi , endangle : math.pi * 1.7}, 6 {startangle : math.pi * 1.7 , endangle : math.pi * 2} 7 ]
1 //创建一个弧生成器 2 var arcpath = d3.svg.arc() 3 .innerradius(0) 4 .outerradius(100) 5 6 //定义颜色 7 var color = d3.scale.category10(); 8 9 10 //插入足够数量的路径元素<path>,分别用弧生成器计算路径 11 svg.selectall("path") 12 .data(datalist) 13 .enter() 14 .append("path") 15 .attr("d",function(d){return arcpath(d)}) 16 .attr("transform","translate(250,250)") 17 .attr("stroke","black") 18 .attr("stroke-width","3px") 19 .attr("fill",function(d,i){return color(i)})
1 svg.selectall("text") 2 .data(datalist) 3 .enter() 4 .append("text") 5 .attr("transform",function(d){ 6 return "translate(250,250)"+"translate("+arcpath.centroid(d)+")" //计算弧的中心位置 7 }) 8 .attr("text-anchor","middle") 9 .attr("fill","white") 10 .attr("font-size","18px") 11 .text(function(d){ 12 return math.floor((d.endangle - d.startangle)*180/math.pi)+"°" 13 })
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
利用JavaScript更改input中radio和checkbox样式
网友评论