通常为多个 SVG 元素类型键入 d3 选择

Question

我需要一个可以为rect和circle元素提供call的回调函数。

像这样：

function commonStuff(selection:d3.Selection<PLACEHOLDER_TYPE, MyDataType, SVGGElement, unknown>) {
selection
.classed('my-class1', true)
.classed('my-class2', true)
}

可以在rect和circle元素上调用，如下所示：

nodes.append('rect').call(commonStuff)
nodes.append('circle').call(commonStuff)

d3 的文档。选择说

第一个通用"GElement"是指所选元素的类型。

我的问题是我不知道将该类型设置为什么(我在上面PLACEHOLDER_TYPE标记了它(以便捕获SVGRectElement和SVGCircleElement两种类型。

如果我将其设置为仅SVGRectElement，我会Type 'SVGCircleElement' is not assignable to type 'SVGRectElement'得到错误，反之亦然。

如果我将其设置为SVGRectElement|SVGCircleElement，则会出现相同的错误。

如果我将其设置为两种类型的公共父级，SVGGraphicsElement，我也会收到相同的错误。

我有一种感觉，我应该以某种方式传递一个泛型，但我对TypeScript的了解还不够多，无法弄清楚。

Answer 1

你可以做这样的事情：

function commonStuff<GType extends d3.BaseType, D>(
selection: d3.Selection<GType, D, d3.BaseType, unknown>
) {
selection
.classed("my-class1", true)
.classed("my-class2", true);
}

例如：

let nodes = d3.select("a");
nodes.append('rect').call(commonStuff);
nodes.append('circle').call(commonStuff);