in src/hooks/use-d3-demo.ts [82:160]
value: String(i),
startAngle: Math.PI * 0.2 * i,
endAngle: Math.PI * 0.2 * (i + 1),
});
}
g.append("defs").attr("id", "transition-defs");
const outerRadius = innerRadius * 1.1;
const digitArc = g
.selectAll(".digitArc")
.data(arcData)
.enter()
.append("g")
.attr("class", "digitArc");
const arc = d3
.arc<ArcData>()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
digitArc
.append("path")
.attr("id", (_, i) => "digitArc" + i)
.attr("d", arc)
.style("fill", (_, i): string => digitColor(String(i)))
.style("stroke", (_, i): string => digitColor(String(i)));
const fontSize = (outerRadius - innerRadius) * 0.8;
const digitText = digitArc
.append("text")
.attr("x", 4)
.attr("dy", fontSize)
.attr("font-size", fontSize);
digitText
.append("textPath")
.attr("xlink:href", (d, i) => "#digitArc" + i)
.text((d) => d.value);
g.append("g").attr("class", "transition").attr("fill", "none");
}, [
currentHeight,
currentWidth,
digitColor,
innerRadius,
maxDigit,
minDigit,
ref,
]);
const init = useCallback(() => {
setLinkNum(Array.from({ length: maxDigit - minDigit + 1 }, () => 0));
setPrevDigit(undefined);
setCurrentWidth(width);
setCurrentHeight(height);
setInnerRadius(width * 0.4);
d3.select(ref.current).selectAll("svg g.transition path").remove();
}, [height, maxDigit, minDigit, ref, width]);
const drawLine = useCallback(
(fromDigit: number, toDigit: number) => {
const svg = d3.select(ref.current);
const line = d3
.line()
.x((d) => d[0])
.y((d) => d[1])
.curve(d3.curveBasis);
const fromAngle = Math.PI * 0.2 * fromDigit + linkNum[fromDigit] * 0.0025;
// If the angle has rolled over into the angle for the next digit
// we need to reset the angle so we stay within the angle range for
// fromDigit. Here we reset the linkNum so that we start over from the
// original angle.
if (fromAngle >= Math.PI * 0.2 * (fromDigit + 1)) {
setLinkNum((l) => {