您的位置：首页 > Web前端 > JavaScript

d3.js 画圆形菜单

2016-08-23 19:01 309 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="application/javascript" src="../d3.js"></script>
<title>Title</title>
<style>
#menu{
position:fixed;
left:0;
top:40%;
background-color: transparent;
}
</style>
</head>
<body>

<!--<svg width="400" height="400">
<!– Pie chart sample –>
<path d="M200,200 L200,20 A180,180 0 0,1 377,231 z"
style="fill:#ff0000;
fill-opacity: 1;
stroke:black;
stroke-width: 1"/>
<path d="M200,200 L377,231 A180,180 0 0,1 138,369 z"
style="fill:#00ff00;
fill-opacity: 1;
stroke:black;
stroke-width: 1"/>
<path d="M200,200 L138,369 A180,180 0 0,1 20,194 z"
style="fill:#0000ff;
fill-opacity: 1;
stroke:black;
stroke-width: 1"/>
<path d="M200,200 L20,194 A180,180 0 0,1 75,71 z"
style="fill:#ff00ff;
fill-opacity: 1;
stroke:black;
stroke-width: 1"/>
<path d="M200,200 L75,71 A180,180 0 0,1 200,20 z"
style="fill:#ffff00;
fill-opacity: 1;
stroke:black;
stroke-width: 1"/>
</svg>-->

<div id="menu" class="menu">

</div>
<script>

var menuTexts=["Home","Page","News","Face"];
var color = d3.scale.category20();
var width = 150;  //画布的宽度
var height = 300;   //画布的高度

var menuR=50;//初始菜单的半径
var openMenuR=150;//展开菜单的半径

var menuAddLength=menuR/3;//圆形菜单中"+"号的长度定义
var menuAddCenterX=menuR/5+menuAddLength/2;//圆形菜单中"+"号的交汇点坐标X
var menuAddCenterY=height/2;//圆形菜单中"+"号的交汇点坐标Y

var svg = d3.select("#menu")     //选择文档中的body元素
.append("svg")          //添加一个svg元素
.attr("width", width)       //设定宽度
.attr("height", height);    //设定高度
for(var i=0;i<menuTexts.length;i++){
var startDu=180-(180/menuTexts.length*(i));
var endDu=180-(180/menuTexts.length*(i+1));
svg.append("path").attr("d","M 0 "+height/2+" L "+(0+Math.sin(2*Math.PI / 360*startDu)*150)+" "+(150+Math.cos(2*Math.PI / 360*startDu)*150)+"  A "+(openMenuR)+" "+openMenuR+" 0 0 1 "+(0+Math.sin(2*Math.PI / 360*endDu)*150)+" "+(150+Math.cos(2*Math.PI / 360*endDu)*150)+" Z")
.attr("class","menu-item")
.attr("stroke","#ffffff")
.attr("fill", "#ffffff");
}

var menuStatus=false;
var menuCircleOnClick=function (d,i) {
if(menuStatus){
d3.selectAll(".menu-item")
.transition()
.delay(function(d,i){
return i * 500;
})
.duration(1000)
.ease("linear").attr("fill","#ffffff");
d3.select("#menu-circle").attr("fill","red");
d3.select("#menu-add-line").attr("stroke","#ffffff");
}else{
d3.select("#menu-add-line").attr("stroke","red");
d3.select("#menu-circle")
.attr("fill","#ffffff");

d3.selectAll(".menu-item")
.transition()
.delay(function(d,i){
return i * 500;
})
.duration(1000)
.ease("linear").attr("fill","red");

}
menuStatus=!menuStatus;
};
svg.append("path").attr("d","M 0 "+(height/2-menuR)+" A "+menuR+" "+menuR+" 0 1 1 0 "+(height/2+menuR)+" Z")
.attr("fill","red").attr("id","menu-circle")
.on("click",menuCircleOnClick);

svg.append("line").attr("x1",menuAddCenterX).attr("y1",menuAddCenterY-menuAddLength/2).attr("x2",menuAddCenterX).attr("y2",menuAddCenterY+menuAddLength/2)
.attr("stroke","#ffffff").attr("stroke-width","2").on("click",menuCircleOnClick);
svg.append("line").attr("x1",menuAddCenterX-menuAddLength/2).attr("y1",menuAddCenterY).attr("x2",menuAddCenterX+menuAddLength/2).attr("y2",menuAddCenterY)
.attr("stroke","#ffffff").attr("stroke-width","2").attr("id","menu-add-line").on("click",menuCircleOnClick);

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航