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: `ð${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>