CODEWITHSUNDEEP
javascripttypescriptd3.jssvg
Denise Mauldin
Denise Mauldin

Reputation: 5615

d3Service/d3-ng2-service TypeScript TS2346 Supplied parameters do not match signature

I have a SVG that contains rect elements and text elements.

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>

Using D3Service from d3-ng2-service, I am doing the following:

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

I'm getting a TS2346 error with the select: error TS2346: Supplied parameters do not match any signature of call target.

The index.d.ts for D3Service is :

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

On line 162 it says:

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

I'm presuming I'm getting the wrong element types there from the index.d.ts and I should be using something else other than SVGRectElement and TextElement, but I can't figure out what. The Angular2 component works fine in practice. How do I read the index.d.ts file to find the correct element types? Thanks!

Upvotes: 1

Views: 82

Answers (1)

sailens
sailens

Reputation: 1614

As you can see in the select() method signature:

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

The select method returns a Selection element, so the cast to SVRectElement won't be possible. Moreover, the cast (if necessary) should go in front of the method called like this: let ele = <SVGRectElement> D3.select(rect_id).node();

In this case, though, the cast it is not necessary, so the code should be:

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

Upvotes: 1

Related Questions