Angular 中 d3js 的类型错误（最新）

Question

我注意到 d3js 与 Angular(typescript) 一起使用时存在许多类型错误。\n例如，我无法让以下代码片段工作

\n

svg.call(d3.zoom().on('zoom', () => {\n      g.attr('transform', d3.events.transform);\n    }));\n

\n

投掷

\n

S2345: Argument of type 'ZoomBehavior<Element, unknown>' is not assignable to parameter of type '(selection: Selection<BaseType, unknown, HTMLElement, any>, ...args: any[]) => void'. \xc2\xa0\xc2\xa0Types of parameters 'selection' and 'selection' are incompatible. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type 'Selection<BaseType, unknown, HTMLElement, any>' is not assignable to type 'Selection<Element, unknown, any, any>'. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Types of property 'select' are incompatible. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type '{ <DescElement extends BaseType>(selector: string): Selection<DescElement, unknown, HTMLElement, any>; <DescElement extends BaseType>(selector: null): Selection<null, undefined, HTMLElement, any>; <DescElement extends BaseType>(selector: ValueFn<...>): Selection<...>; }' is not assignable to type '{ <DescElement extends BaseType>(selector: string): Selection<DescElement, unknown, any, any>; <DescElement extends BaseType>(selector: null): Selection<null, undefined, any, any>; <DescElement extends BaseType>(selector: ValueFn<...>): Selection<...>; }'. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Types of parameters 'selector' and 'selector' are incompatible. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Types of parameters 'groups' and 'groups' are incompatible. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type 'BaseType[] | ArrayLike<BaseType>' is not assignable to type 'Element[] | ArrayLike<Element>'. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type 'BaseType[]' is not assignable to type 'Element[] | ArrayLike<Element>'. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type 'BaseType[]' is not assignable to type 'Element[]'. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type 'BaseType' is not assignable to type 'Element'. \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type 'null' is not assignable to type 'Element'.\n

\n

另外，另一个错误是 d3.events 未定义。

\n

关于如何让它发挥作用有什么建议吗？有多个代码示例由于类型错误而无法工作。即使使用 @ts-ignore 进行抑制也无法解决问题。

\n

更新：使用从 v5 到 v6 的迁移指南后，缩放处理程序不会再抛出任何错误

\n

const zoom = d3.zoom().on('zoom', ({transform}, d) => {\n   g.attr('transform', transform);\n});\n

\n

但是当尝试像这样调用它时仍然存在类型错误

\n

svg.call(zoom)\n

\n

Answer 1

关于“d3.event未定义”：

d3.event如果您收到未定义的类型错误，但d3.event在运行应用程序时有效，这意味着该@types/d3包位于与 d3 v6 匹配的版本中，而 d3 包本身位于 d3 v5 上。发生此错误的原因是d3 v5 和 v6 之间的更改，其中包括删除d3.event.

您可以在 npm 页面中查看类型版本。它们大致匹配 d3 版本，因此您要查找的版本是@types/d3@5.16.4.

关于类型错误：

如果您没有定义选择的类型，则默认为Selection<BaseType, unknown, HTMLElement, any>. 但是，d3.zoom默认为ZoomBehavior<Element, unknown>. 问题是打字稿抱怨BaseType和Element不兼容。

要解决这个问题，您可以使用显式泛型定义 svg 选择和缩放：

const svg = d3.select<SVGSVGElement, unknown>(...);
const zoom = d3.zoom<SVGSVGElement, unknown>() [...];

svg.call(zoom);

第一行表示您正在选择一个具有数据的SVGSVGElement（元素的类型） 。第二行表示将在也具有基准类型的选择上调用缩放。<svg>unknownSVGSVGElementunknown

现在，zoom 和 svg 的泛型都匹配，并且该.call方法将兼容。这是一个演示它的codesandbox。