chart = ({ d }) => {
const svg = d3.create("svg").attr("width", d.w).attr("height", d.h);
const center = { x: d.w / 2, y: d.h / 2 };
const gPlot = svg
.append("g")
.attr("class", "plot-container")
.attr("transform", `translate(${center.x}, ${center.y})`);
const gMonthLabel = gPlot
.append("g")
.attr("class", "month-labels")
.call((g) =>
arcLabel({
selection: g,
label: labels,
pathGenerator: arcGenerator({ angleScale, radius: d.r }),
format: d3.utcFormat("%B"),
className: "month"
})
);
const line = gPlot
.append("line")
.attr("x2", d.r)
.attr("y2", 0)
.attr("stroke", "black");
const angleText = svg.append("text");
const valueText = gPlot.append("text").attr("text-anchor", "middle");
svg.on("mousemove", (event) => {
const [x, y] = d3.pointer(event);
const [cx, cy] = [x - center.x, y - center.y];
const radAngle = atan2Scale(cy, cx);
const computerDegAngle = (radAngle * 180) / Math.PI;
const valueAtAngle = angleScale.invert(radAngle);
const valueFormat = valueAtAngle.toISOString();
angleText
.attr("x", x + 10)
.attr("y", y - 10)
.text(`${computerDegAngle}°`);
valueText.text(valueFormat);
line.attr("transform", `rotate(${computerDegAngle})`);
});
return svg.node();
}