首次单击html中的按钮后，无法按要求显示piemenu

Question

我正在使用wheel-nav制作一个饼图菜单。我从http://pmg.softwaretailoring.net/.I得到的代码按下按钮显示菜单但是当我再次点击按钮时，馅饼菜单的许多部分都消失了和文本也。 我尝试找出解决方案但是faild所以我决定每次按钮点击重新加载piemenu但是同样的事情发生了，首先显示它应该是但是再次点击按钮它表现异常。

这是让我的问题清晰的图像。

第一次点击按钮

第一次之后  

以下是我用于在按钮单击

上创建饼图菜单的代码

  <script>
//circular menu
var i = 0;

function make() {
    if(i===0)
    {
        i=1;
  console.log("here2");
  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', 'Games', 'Security settings', 'profile', 'signout']);
  }
  else
  {
      console.log('here3');
      $('#piemenu').load(document.URL +  ' #piemenu');
      i=0;

  }

}

和html代码：

    <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-cssmode data-wheelnav-init>
  <div data-wheelnav-navitemicon='?' onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='slideshare' onmouseup='requests();'></div>
  <div data-wheelnav-navitemicon='pen' onmouseup='create();'></div>
  <div data-wheelnav-navitemicon='arrowright' onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='gear' onmouseup='settings();'></div>
  <div data-wheelnav-navitemicon='edit' onmouseup='profile();'></div>
  <div data-wheelnav-navitemicon='disconnect' onmouseup='alert("Place your logic here.");'></div>
</div>

和css代码：

#piemenu > svg { width: 100%; height: 100%;}
#piemenu { height: 400px; width: 400px;right:-50px;top:-119px;position: 
fixed;}
@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; }
  [class|=wheelnav-piemenu-title] > tspan { font-family: Impact, Charcoal, 
  sans-serif; font-size: 24px; }
  .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; }

Answer 1

我建议您在window.onload中只调用一次createWheel（以及make函数中的所有初始化逻辑）

使用piemenu.spreadWheel();显示/隐藏您的菜单。