当我第二次点击按钮时，圆形菜单的对齐方式会发生变化

Question

我点击一个按钮时会打开一个圆形菜单。但是，当我再次单击该按钮时，其对齐方式会发生变化。

第一次单击用户按钮：

第二次单击用户按钮：

我试图在JSFiddle上传它，但圆圈没有出现在那里。很抱歉！

以下是代码：

HTML

<a class=" glyphicon glyphicon-user" href="#" style=";font-size: 36px;color: white;padding: 10px;padding-right: 20px;" id="open" onclick="make()"></a>
<div id='piemenu' data-wheelnav data-wheelnav-slicepath='PieSlice' data-wheelnav-spreader data-wheelnav-spreaderpath='PieSpreader' data-wheelnav-marker data-wheelnav-markerpath='PieLineMarker' data-wheelnav-rotateoff data-wheelnav-navangle='167.14285714285714'
data-wheelnav-titleheight='25.714285714285715' data-wheelnav-cssmode data-wheelnav-init>
  <div data-wheelnav-navitemicon='?' style="font-size:50px;" onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='slideshare' style="font-size:50px;" onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='pen' style="font-size:50px;" onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='key' onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='gear' class=" glyphicon glyphicon-asterisk" style="font-size:50px;" onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='disconnect' style="font-size:50px;" onmouseup='alert("Place your logic here.");'>
    <a class=" glyphicon glyphicon-log-out"></a>
  </div>
  <div data-wheelnav-navitemicon='' style="font-size:50px;" onmouseup='alert("Place your logic here.");'></div>
</div>

的JavaScript：

var i = 0;

function make() {
  var piemenu = new wheelnav('piemenu');;
  piemenu.spreaderInTitle = icon.plus;
  piemenu.spreaderOutTitle = icon.cross;
  piemenu.spreaderRadius = piemenu.wheelRadius * 0.13;
  piemenu.clockwise = false;
  piemenu.sliceInitPathFunction = piemenu.slicePathFunction;
  piemenu.initPercent = 0.1;
  piemenu.wheelRadius = piemenu.wheelRadius * 0.83;
  piemenu.navItemsContinuous = true;
  piemenu.sliceAngle = 25.714285714285715;
  piemenu.createWheel();
  piemenu.setTooltips(['help', 'friend  
        request ','
        create ','
        privacy ','
        settings ','
        signout ','
        download ']);
}

CSS：

#piemenu > svg {
  width: 100%;
  height: 100%;
}

#piemenu {
  height: 400px;
  width: 400px;
  float: right;
  margin-right: -5%;
  top: -103px;
  position: relative;
}

@media (max-width: 400px) {
  #piemenu {
    height: 300px;
    width: 300px;
  }
}

[class|=wheelnav-piemenu-slice-basic] {
  fill: #497F4C;
  stroke: none;
}

[class|=wheelnav-piemenu-slice-selected] {
  fill: #497F4C;
  stroke: none;
}

[class|=wheelnav-piemenu-slice-hover] {
  fill: #497F4C;
  stroke: none;
  fill-opacity: 0.77;
  cursor: pointer;
}

[class|=wheelnav-piemenu-title-basic] {
  fill: #333;
  stroke: none;
}

[class|=wheelnav-piemenu-title-selected] {
  fill: #fff;
  stroke: none;
}

[class|=wheelnav-piemenu-title-hover] {
  fill: #222;
  stroke: none;
  cursor: pointer;
}

.wheelnav-piemenu-spreader-in,
.wheelnav-piemenu-spreader-out {
  fill: #444;
  stroke: #444;
  stroke - width: 2;
  cursor: pointer;
}

.wheelnav-piemenu-spreadertitle-in,
.wheelnav-piemenu-spreadertitle-out {
  fill: #eee;
  stroke: #444;
  cursor: pointer;
}

.wheelnav-piemenu-marker {
  stroke: #444;
  stroke-width: 2;
}