angleAxis = (g) =>
g
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.call((g) =>
g
.selectAll("g")
.data(angle.ticks())
.join("g")
.each((d, i) => (d.id = DOM.uid("month")))
.call((g) =>
g
.append("path")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.2)
.attr(
"d",
(d) => `
M${d3.pointRadial(angle(d), innerRadius)}
L${d3.pointRadial(angle(d), outerRadius)}
`
)
)
.call((g) =>
g
.append("path")
.attr("id", (d) => d.id.id)
.datum((d) => [d, d3.utcMonth.offset(d, 1)])
.attr("fill", "none")
.attr(
"d",
([a, b]) => `
M${d3.pointRadial(angle(a), innerRadius)}
A${innerRadius},${innerRadius} 0,0,1 ${d3.pointRadial(
angle(b),
innerRadius
)}
`
)
)
.call((g) =>
g
.append("text")
.append("textPath")
.attr("startOffset", 6)
.attr("xlink:href", (d) => d.id.href)
.text(d3.utcFormat("%B"))
)
)