svg 圆形标签数据分布
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1{width: 780px;height: 370px;background: white; background: url(./bakground.jpeg) no-repeat;margin:20px auto; overflow: hidden;} body{background: gray;} </style> </head> <body> <div id="div1"> <!-- <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" > --> <!-- <circle cx="100" cy="100" r="40" fill = "transparent" stroke="black" stroke-width="5"></circle> --> <!-- <circle cx="100" cy="100" r="40" style="fill:transparent;stroke:black; stroke-width:5;" ></circle> --> <!-- <rect width="200" height="200" x="100" y="100" fill="100" fill="red" rx="30"></rect> --> <!-- <line x1="50" y1="50" x2="200" y2="200" stroke="black" stroke-width="5" stroke-opacity="0.5"></line> --> <!-- 分组 --> <!-- <g id = "g1" transform="translate(200,200)" stroke-width="5" stroke = "red"> <circle r="40" fill="transparent"></circle> <circle r="30" fill="transparent"></circle> <circle r="20" fill="transparent"></circle> <circle r="10" fill="transparent"></circle> </g> --> <!-- 加文字 --> <!-- <g style="cursor:pointer"> <circle cx="200" cy="200" r="50" fill="transparent" stroke="red" stroke-width="5" ></circle> <text x="200" y="208" font-size ="20" text-anchor="middle" >BMW</text> </g> --> <!-- 加背景图 --> <!-- <g style="cursor:pointer"> <image x="150" y="149" width="100" height="103" xlink:href="./1.png"></image> <text x="200" y="208" font-size ="20" text-anchor="middle" >BMW</text> </g> --> <!-- 两圆连线 --> <!-- <g style="cursor:pointer"> <line x1="100"y1="100" x2="390" y2="200" stroke="#ccc"></line> <line x1="100"y1="100" x2="390" y2="200" stroke="transparent" stroke-width="10" ></line> <rect x="235" y="140" fill="#999" width="20" height="20" rx="5"></rect> <text x="245" y="158" fill="white" font-size="20" text-anchor="middle">?</text> </g> <g style="cursor:pointer"> <circle cx="100" cy="100" r="40" fill="white" stroke="red" stroke-width="3" ></circle> <text x="100" y="108" font-size="20" text-anchor="middle" >Audi</text> </g> <g style="cursor:pointer"> <circle cx="390" cy="200" r="60" fill="white" stroke="red" stroke-width="3" ></circle> <text x="390" y="208" font-size="20" text-anchor="middle" >Benzi</text> </g> --> <!-- </svg> --> </div> </body> </html> <script> window.onload = function() { var svgNS = 'http://www.w3.org/2000/svg'; var oParent = document.getElementById('div1'); var centerX = oParent.offsetWidth/2; var centerY = oParent.offsetHeight/2; var circleNum = 9; var angleNum = 360/circleNum; var centerR = 150; var otherData = []; for(var i =0;i<circleNum;i++) { var y = Math.sin(i*40*Math.PI/180)*centerR + centerY; var x = Math.cos(i*40*Math.PI/180)*centerR + centerX; otherData.push({x:x,y:y,text:i}); } var data = { centerNode : {text:'BMW'}, otherNode: otherData }; function addTag() { var oSvg = createTag('svg',{'xmlns':svgNS,'width':'100%','height':'100%'}); for(var i =0;i<data.otherNode.length;i++) { addOtherTag(data.otherNode[i],oSvg); } var oG = createTag('g',{'style':'cursor:pointer'}); var oCircle = createTag('circle',{'cx':centerX,'cy':centerY,'r':'40','fill':'white','stroke':'red','stroke-width':'1'}); var oText = createTag('text',{'x':centerX,'y':centerY+8,'font-size':'20','text-anchor':'middle'}); oText.innerHTML = data.centerNode.text; oG.appendChild(oCircle); oG.appendChild(oText); oSvg.appendChild(oG); oParent.appendChild(oSvg); } addTag(); function addOtherTag(otherAttr,oSvg) { var oG = createTag('g',{'style':'cursor:pointer','class':'lineStyle'}); var oLine1 = createTag('line',{'x1':otherAttr.x,'y1':otherAttr.y,'x2':centerX,'y2':centerY,'stroke':'#ccc'}); var oLine2 = createTag('line',{'x1':otherAttr.x ,'y1':otherAttr.y,'x2':centerX,'y2':centerY,'stroke':'transparent','stroke-width':'10'}); var oRect = createTag('rect',{'x':(otherAttr.x+centerX)/2-10,'y':(otherAttr.y+centerY)/2-10,'fill':'#999','width':'20','height':'20','rx':'5'}); var oText = createTag('text',{'x':(otherAttr.x+centerX)/2,'y':(otherAttr.y+centerY)/2+8,'fill':'white','font-size':'20','text-anchor':'middle'}) oText.innerHTML = '?'; oG.appendChild(oLine1); oG.appendChild(oLine2); oG.appendChild(oRect); oG.appendChild(oText); oSvg.appendChild(oG); var oG = createTag('g',{'style':'cursor:pointer','class':'circleStyle'}); var oCircle = createTag('circle',{'cx':otherAttr.x,'cy':otherAttr.y,'r':'30','fill':'white','stroke':'red','stroke-width':'1'}); var oText = createTag('text',{'x':otherAttr.x,'y':otherAttr.y+8,'font-size':'20','text-anchor':'middle'}); oText.innerHTML = otherAttr.text; oG.appendChild(oCircle); oG.appendChild(oText); oSvg.appendChild(oG); } /* var oSvg = document.createElementNS(svgNS,'svg'); oSvg.setAttribute('xmlns',svgNS); oSvg.setAttribute('width','100%'); oSvg.setAttribute('height','100%'); oParent.appendChild(oSvg); */ /* 封装一个创建标签的函数 */ function createTag(tag,objAttr) { var oTag = document.createElementNS(svgNS,tag); for(var attr in objAttr) { oTag.setAttribute(attr,objAttr[attr]); } return oTag; } function bindTag() { var aLine = document.getElementsByClassName('lineStyle'); var aCircle = document.getElementsByClassName('circleStyle'); for(var i =0 ; i<aCircle.length;i++) { aCircle[i].onmouseenter = function() { startMove(this.getElementsByTagName('circle')[0],30,40); var prevLine = this.previousElementSibling; prevLine.getElementsByTagName('line')[0].setAttribute('stroke','blue'); prevLine.getElementsByTagName('rect')[0].setAttribute('fill','red'); } aCircle[i].onmouseleave = function() { startMove(this.getElementsByTagName('circle')[0],40,30); var prevLine = this.previousElementSibling; prevLine.getElementsByTagName('line')[0].setAttribute('stroke','#ccc'); prevLine.getElementsByTagName('rect')[0].setAttribute('fill','#999'); } } for(var i =0 ; i<aLine.length;i++) { aLine[i].onmouseenter = function() { this.getElementsByTagName('line')[0].setAttribute('stroke','blue'); this.getElementsByTagName('rect')[0].setAttribute('fill','red'); var nextCircle = this.nextElementSibling; startMove(nextCircle.getElementsByTagName('circle')[0],30,40); }; aLine[i].onmouseleave = function() { this.getElementsByTagName('line')[0].setAttribute('stroke','#ccc'); this.getElementsByTagName('rect')[0].setAttribute('fill','#999'); var nextCircle = this.nextElementSibling; startMove(nextCircle.getElementsByTagName('circle')[0],40,30); } } } bindTag(); function startMove(obj,r1,r2) { var nowR = r1; var overR = r2; obj.speed = 0; clearInterval(obj.timer); obj.timer = setInterval(function() { obj.speed += (overR-nowR)/6; //弹性公式 obj.speed *=0.8; if(Math.abs(overR- nowR)<=1&&Math.abs(obj.speed)<=1) { clearInterval(obj.timer); obj.setAttribute('r',overR); } else{ nowR += obj.speed; obj.setAttribute('r',nowR); } }) } /* var oSvg = createTag('svg',{'xmlns':svgNS,'width':'100%','height':'100%'}); var oG = createTag('g',{'style':'cursor:pointer'}); var oLine1 = createTag('line',{'x1':'100','y1':'100','x2':'390','y2':'200','stroke':'#ccc'}); var oLine2 = createTag('line',{'x1':'100','y1':'100','x2':'390','y2':'200','stroke':'transparent','stroke-width':'10'}); var oRect = createTag('rect',{'x':'235','y':'140','fill':'#999','width':'20','height':'20','rx':'5'}); var oText = createTag('text',{'x':'245','y':'158','fill':'white','font-size':'20','text-anchor':'middle'}) oText.innerHTML = '?'; oG.appendChild(oLine1); oG.appendChild(oLine2); oG.appendChild(oRect); oG.appendChild(oText); oSvg.appendChild(oG); oParent.appendChild(oSvg); */ } </script>