javascript - d3Service/d3-ng2-service TypeScript TS2346 提供的参数与签名不匹配

Question

我有一个包含矩形元素和文本元素的 SVG。

index.html

<svg id="timeline" width="300" height="100">
    <g transform="translate(10,10)" class="container" width="280" height="96">
        <rect x="10" y="30" width="48" cy="10" r="30" height="60" class="timelineSeries_0" id="day1"></rect>
        <rect x="58" y="30" width="48" cy="10" r="30" height="60" class="timelineSeries_0" id="day2"></rect>
        <rect x="106" y="30" width="48" cy="10" r="30" height="60" class="timelineSeries_0" id="day3"></rect>
        <rect x="154" y="30" width="48" cy="10" r="30" height="60" class="timelineSeries_0" id="day4"></rect>
        <text class="textnumbers" id="day1" x="22.8" y="50">1</text>
        <text class="textnumbers" id="day2" x="70.8" y="50">1</text>
        <text class="textnumbers" id="day3" x="118.8" y="50">1</text>
        <text class="textnumbers" id="day4" x="116.8" y="50">1</text>
    </g>
</svg>

使用 d3-ng2-service 中的 D3Service ，我正在执行以下操作:

let day = 1;
let rect_id = "rect#day" + day;
let ele = D3.select<SVGRectElement>(rect_id).node();
let label_id = rect_id.replace("rect", ".textnumbers");
let numberEle = D3.select<TextElement>(label_id);

我在选择时遇到 TS2346 错误: error TS2346: Supplied parameters do not match any signature of call target.

index.d.ts对于 D3Service 来说是:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/d3-selection/index.d.ts#L155

第 162 行显示:

select<DescElement extends BaseType>(selector: string): Selection<DescElement, Datum, PElement, PDatum>;

我假设我从 index.d.ts 那里得到了错误的元素类型我应该使用 SVGRectElement 以外的其他东西和TextElement ，但我不明白是什么。 Angular2 组件在实践中运行良好。我如何阅读index.d.ts文件来查找正确的元素类型？谢谢!

Answer 1

正如您在 select() 中看到的那样方法签名:

select<DescElement extends BaseType>(selector: string): Selection<DescElement, Datum, PElement, PDatum>;

select 方法返回 Selection元素，因此转换为 SVRectElement不可能的。此外，强制转换(如果需要)应该放在调用的方法之前，如下所示:let ele = <SVGRectElement> D3.select(rect_id).node();

但在这种情况下，强制转换是不必要的，因此代码应该是:

let rectEle = self.d3.select(rectId);