Вращающееся меню навигации?

let data = Array(5).fill(0).map(object) 
let a = Math.PI*2/data.length, start = -Math.PI/2 
 
let r1 = 30, r2 = 35, r3 = 37, r4 = 95; 
let basePts = []; 
basePts.push(pt(0, r1)) 
basePts.push(pt(a, r2)) 
basePts.push(pt(a*2-0.15, r3)) 
basePts.push(pt(a*1.5-0.1, r4)) 
let arc = `A ${r4} ${r4} 0 0 1 ${pt(a/2, r4)}` ; 
 
append('path', 'line')  
  .attr('stroke', d => d.color) 
  .attr('fill', 'none') 
  .attr('d', 'M' + basePts.join('L') + arc) 
  .attr('transform', (d, i) => `rotate(${-i*360/data.length})`) 
 
append('text', 'icon') 
  .attr('fill', d => d.color) 
  .html(d => d.icon) 
  .attr('x', (e, i) => pt(a*i+a*0.7,80)[0]) 
  .attr('y', (e, i) => pt(a*i+a*0.7,80)[1]) 
 
append('text', 'number') 
  .attr('fill', d => d.color) 
  .html((d, i) => i+1) 
  .attr('x', (e, i) => pt(a*i+a*1.5,44)[0]) 
  .attr('y', (e, i) => pt(a*i+a*1.5,44)[1]) 
 
basePts.shift(); 
 
append('path', 'active')  
  .attr('d', 'M' + basePts.join('L') + arc) 
  .attr('transform', (d, i) => `rotate(${-i*360/data.length})`) 
  .on('click', (d,i) => { 
    let angle = (i + 1)*360 / data.length 
    d3.select('g').attr('transform', `rotate(${angle})`) 
    d3.selectAll('text').attr('transform', function(){ 
        let x = d3.select(this).attr('x') 
        let y = d3.select(this).attr('y') 
        return `rotate(${-angle},${x},${y})`; 
    }) 
  })   
 
function append(node, clazz) { 
    return d3.select('g') 
          .selectAll(node + '.' + clazz) 
          .data(data) 
          .enter() 
          .append(node) 
          .classed(clazz, true) 
} 
 
function pt (a, r) { 
    a = - a - Math.PI/2 
    return [Math.cos(a)*r, Math.sin(a)*r]; 
} 
 
function object(){ 
    return { 
        color: `hsl(${Math.random()*360},55%,55%)`, 
        icon: `&#xf0${Math.floor(Math.random()*100)};` 
    } 
}

text { 
    stroke: transparent; 
    dominant-baseline: middle; 
    text-anchor: middle; 
} 
 
.icon { 
    font-family: FontAwesome; 
    font-size: 20px; 
    transition: 1s; 
} 
 
.number { 
    font-family: arial, sans-serif; 
    font-size: 15px; 
    transition: 1s; 
} 
 
path.active{ 
    fill: transparent; 
    cursor: pointer; 
} 
 
g { 
    transition: 1s; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"> 
<svg viewbox="-100 -100 200 200" width="500" height="500"> 
    <g></g> 
</svg>

let data = Array(7).fill(0).map(object) 
let a = Math.PI*2/data.length, start = -Math.PI/2 
 
let r1=30, r2=35, r3=37, r4=95, rotation=0; 
let pts = []; 
pts.push(pt(0, r1)) 
pts.push(pt(a, r2)) 
pts.push(pt(a*2-0.15, r3)) 
pts.push(pt(a*1.5-0.45, r4)) 
let arc = (radius, angle) => `A ${radius} ${radius} 0 0 1 ${pt(angle, radius)}` ; 
 
append('path', 'line')  
  .attr('stroke', d => d.color) 
  .attr('d', 'M' + pts.join('L') + arc(r4, a-0.7)) 
  .attr('transform', (d, i) => `rotate(${-i*360/data.length})`) 
 
append('text', 'icon rotate') 
  .attr('fill', d => d.color) 
  .html(d => d.icon) 
  .attr('x', (e, i) => pt(a*i+a*0.35,80)[0]) 
  .attr('y', (e, i) => pt(a*i+a*0.35,80)[1]) 
 
append('path', 'text-wrap-path') 
  .attr('id', (d, i) => `text-wrap-path_${i}`) 
  .attr('x', (e, i) => pt(a*i+a*0.77,67)[0]) 
  .attr('y', (e, i) => pt(a*i+a*0.77,67)[1]) 
  .attr('d', (e, i) => { 
     let c = pt(a*i+a*0.77,67); 
     return Array(5).fill(0).map((e,i) => line(Math.acos(1-2/5*i))) 
     
     function line(a) { 
         let p1 = pt(a, 21), p2 = pt(-a, 21); 
         return 'M' + (c[0]+p1[0]) + ',' + (c[1]+p1[1]) +  
                'L' + (c[0]+p2[0]) + ',' + (c[1]+p2[1]) 
     } 
  }) 
 
  append('text', 'text')  
      .append('textPath') 
      .attr('href', (e,i) => `#text-wrap-path_${i}`) 
      .text(d => d.text) 
      .attr('fill', d => d.color) 
      .attr('startOffset', 40) 
 
append('text', 'number rotate') 
  .attr('fill', d => d.color) 
  .html((d, i) => i + 1) 
  .attr('x', (e, i) => pt(a*i+a*1.2,44)[0]) 
  .attr('y', (e, i) => pt(a*i+a*1.2,44)[1]) 
 
pts.shift(); 
 
append('path', 'active')  
  .attr('fill', 'transparent') 
  .attr('d', 'M' + pts.join('L') + arc(r4, a-0.7)) 
  .attr('transform', (d, i) => `rotate(${-i*360/data.length})`) 
  .on('click', click)   
 
lineAndText(r4+15, 0) 
lineAndText(r4+30, 1) 
lineAndText(r4+45, 2) 
 
function lineAndText(r,n){ 
     
    append('path', 'line1 l' + n)  
      .attr('id', (d, i) => `line1_l${n}_${i}`) 
      .attr('stroke', d => d.color) 
      .attr('d', 'M' + pt(a-0.05*(n+1), r) + arc(r, 0.2-0.05*(n+1))) 
      .attr('transform', (d, i) => `rotate(${-i*360/data.length})`) 
 
    append('text', 'menu l' + n)  
      .append('textPath') 
      .attr('href', (e,i) => `#line1_l${n}_${i}`) 
      .text(d => d.menu[n]) 
      .attr('fill', d => d.color) 
      .attr('startOffset', 40) 
} 
 
function click(d,i) { 
    let angle = (i+1)*360/data.length-30 
    let from = rotation; 
    rotation = angle; 
     
    d3.selectAll('.line1').style('opacity', 0) 
    d3.selectAll('.line1.index_'+i).style('opacity', 1) 
     
    d3.selectAll('.menu').style('opacity', 0) 
    d3.selectAll('.menu.index_'+i).style('opacity', 1) 
     
    d3.select('g').transition().duration(1000) 
      .attrTween('transform', () => t => `rotate(${from+(angle-from)*t})`) 
     
    d3.selectAll('.text-wrap-path').transition().duration(1000) 
      .attrTween('transform', function() { 
        let x = d3.select(this).attr('x') 
        let y = d3.select(this).attr('y') 
        return t => `rotate(-${from+(angle-from)*t}, ${x}, ${y})` 
    }) 
     
    d3.selectAll('text.rotate').transition().duration(1000) 
      .attrTween('transform', function() { 
        let x = d3.select(this).attr('x') 
        let y = d3.select(this).attr('y') 
        return t => `rotate(-${from+(angle-from)*t}, ${x}, ${y})` 
    }) 
} 
 
function append(node, clazz) { 
    return d3.select('g') 
          .selectAll(node + '.' + clazz) 
          .data(data) 
          .enter() 
          .append(node) 
          .attr('fill', 'none') 
          .attr('class', (d, i) => `${clazz} index_${i}`) 
} 
 
function pt (a, r) { 
    a = - a - Math.PI/2 
    return [Math.cos(a)*r, Math.sin(a)*r]; 
} 
 
function object(){ 
    return { 
        color: `hsl(${Math.random()*360},55%,55%)`, 
        icon: `&#xf0${Math.floor(Math.random()*100)};`, 
        menu: [`menu 1`, `menu 2`, `menu 3`], 
        text: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur'.split(' ').filter(() => Math.random() > 0.5).join(' ') 
    } 
}

text { 
    stroke: transparent; 
    dominant-baseline: middle; 
    text-anchor: middle; 
} 
 
.icon { 
    font-family: FontAwesome; 
    font-size: 18px; 
} 
 
.number { 
    font-family: arial, sans-serif; 
    font-size: 15px; 
} 
 
path.active{ 
    cursor: pointer; 
} 
 
.line1, .menu { 
    opacity: 0; 
    transition: 1s; 
} 
text.menu{ 
    dominant-baseline: text-before-edge; 
    font-size:13px; 
    cursor:pointer; 
} 
 
textPath { 
    transition: 500ms; 
} 
 
text.menu:hover textPath { 
    fill: red; 
} 
text.text { 
    font-size: 8px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"> 
<svg viewbox="-100 -150 200 300" width="500" height="700"> 
    <g></g> 
</svg>