一般为多种 SVG 元素类型输入 d3 选择

Question

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

像这样的东西：

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.Selection 的文档说

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

而我的问题是，我不知道是什么那种类型设置为（我标记它PLACEHOLDER_TYPE上面），以捕捉这两种类型SVGRectElement和SVGCircleElement。

如果我将其设置为 just 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);