xAxis = g => g
.attr('class', 'x-axis')
.call(g => g.selectAll('g')
.data(birthdays)
.join('g')
.call(g => g.append('path')
.attr('stroke', '#3D4852')
.attr('stroke-opacity', 0.6)
.attr('stroke-dasharray', 2)
.attr('d', d => `
M${d3.pointRadial(angle(d), innerRadius)}
L${d3.pointRadial(angle(d), outerRadius)}`))
.call(g => g.append('path')
.attr('class', 'bogen')
.attr('id', d=> `year-${d.getFullYear()}`)
.datum(d => [d, d.getFullYear(), d.getFullYear() + 1, d.getFullYear() - 1986])
.attr('fill', 'none')
.attr('d', ([d, a, b, p]) => {
let shift = p > 9 ? 0.03 : 0.015;
return `M${d3.pointRadial(angle(d) - shift, outerRadius + 4)}
A${outerRadius},${outerRadius}
0,0,1 ${d3.pointRadial(angle(d) + 20, outerRadius)}`
}))
.call(g => g.append('text')
.append('textPath')
.attr('font-size', 13)
.attr('fill', '#8795A1')
.attr('startOffset', 0)
.attr('xlink:href', d => `#year-${d.getFullYear()}`)
.text(d => d.getFullYear() - 1986)));