d3Service/d3-ng2-service TypeScript TS2346提供的參數不匹配簽名

Question

我有一個包含rect元素和文本元素的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.

的D3服務的index.d.ts是：

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);