value: String()

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) => {