d3Service/d3-ng2-service TypeScript TS2346 Mitgelieferte Parameter stimmen nicht mit Signatur überein

Question

Ich habe ein SVG, das Rect-Elemente und Textelemente enthält.

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> 

Mit D3Service von d3-ng2-service, ich tue das folgende:

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

Ich erhalte eine TS2346 Fehler mit dem select: error TS2346: Supplied parameters do not match any signature of call target.

Die index.d.ts für D3Service ist:

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

On line 162 heißt es:

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

Ich bin Vermutung ich die falschen Elementtypen dort vom index.d.ts bin immer und ich sollte etwas anderes als SVGRectElement und TextElement verwenden , aber ich kann nicht herausfinden, was. Die Angular2-Komponente funktioniert in der Praxis gut. Wie lese ich die Datei index.d.ts, um die richtigen Elementtypen zu finden? Vielen Dank!

Answer 1

Wie Sie in der select() Methode Unterschrift sehen können:

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

Die select-Methode ein Selection Element zurückgibt, so dass die Umwandlung in SVRectElement wird nicht möglich sein. Außerdem soll vor den so aufgerufen Verfahren geht die Besetzung (falls erforderlich): let ele = <SVGRectElement> D3.select(rect_id).node();

In diesem Fall aber die Besetzung ist es nicht notwendig, so sollte der Code sein:

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