我应该为 d3.select() 分配什么 typescript 类型，以便能够使用 useRef 钩子选择 SVG 元素？

Question

我正在尝试将正确的类型添加到我的 d3.select 语句中，以便设置 mySVG 变量。

function App() {
  const [mySVG, setMySVG] = useState<d3.Selection<d3.BaseType, unknown, HTMLElement, any>>()
  const svgRef = useRef<SVGSVGElement | null>(null)

  useEffect(() => {
     setMySVG(d3.select(svgRef.current));
     
  }, [])

  return (
    <svg ref= {svgRef}>


    </svg>
  );
}

目前，我在代码中得到了下面的错误突出显示：

setMySVG(d3.select(svgRef.current));

选择指定的节点元素。

第一个通用“GElement”指的是要选择的元素的类型。第二个通用“OldDatum”是指所选元素上的基准类型。当重新选择具有先前设置的已知基准类型的元素时，这非常有用。

@param node — 要选择的元素

“Selection”类型的参数不可分配给“SetStateAction”类型的参数 |未定义>'。 类型“Selection”不可分配给类型“Selection”。

“select(...).select(...).select(...).data”的类型在这些类型之间不兼容。 类型 '{ (): 未定义[]; （数据：NewDatum[] | 可迭代，键？：d3.ValueFn | 未定义）：d3.Selection<...>； |未定义）：d3.Selection<...>；

我已经通过将类型替换为 any 来使其工作，但我希望能够分配正确的关联类型。

Answer 1

要使用 D3 选择 SVG 元素并为“mySVG”分配正确的 TypeScript 类型，您可以对代码进行以下修改：

1. 从 D3 导入必要的类型（“Selection”和“BaseType”）
2. 更新“mySVG”的状态定义以允许“null”值作为初始状态，并指定正确的类型。
3. 在“useEffect”中，在尝试使用 D3 选择“svgRef.current”之前检查“svgRef.current”是否不为空。这有助于防止空引用错误。

import { Selection, BaseType } from 'd3';

function App() {
  const [mySVG, setMySVG] = useState<Selection<SVGSVGElement | null, unknown, HTMLElement, any> | null>(null);
  const svgRef = useRef<SVGSVGElement | null>(null);

  useEffect(() => {
    if (svgRef.current) {
      setMySVG(d3.select<SVGSVGElement, unknown>(svgRef.current));
    }
  }, []);

  return (
    <svg ref={svgRef}>
      {/* Your SVG content here */}
    </svg>
  );
}