angular - d3v4 + Typescript + angular2 fel vid användning av d3.line().x((d) => {funktion})

Så jag har det här...

import { D3Service, D3, Selection } from 'd3-ng2-service';

interface ChartData {
    q: number,
    p: number
} 

export class GraphComponent implements OnInit{
   private d3;
   private x1;
   private y;

    constructor(element: ElementRef, d3Service: D3Service) { 
        this.d3 = d3Service.getD3(); 
        let d3 = this.d3;


    this.y = d3.scaleLinear()
    .domain([0,100])
    .range([330, 20])
    ;
    this.x1 = d3.scaleLinear()
    .range([0, 100])
    ;
}

   render() {
      let y = this.y;
      let x1 = this.x1;
      let data = [{p:1,q:1}, {p:0.5,q:2}]

       var line = d3.line()
          .x((d: ChartData) => {return x1(d.q);})
          .y((d: ChartData) => {return y(d.p);});

        svg.append("path")
          .data(data)
          .attr("class", "line")
          .attr("d", line);
   }
}

Jag får ett fel på raden .x(d: ChartData) som säger:

Argument av typen '(d: ChartData) => any' kan inte tilldelas parametern av typen '(d: [number, number], index: number, data: [number, number][]) => number'. Typerna av parametrarna 'd' och 'd' är inkompatibla. Typen '[number, number]' kan inte tilldelas typen 'ChartData'. Egenskapen 'q' saknas i typen '[number, number]'.

Vilket jag sedan tittar på dokumentationen för d3, som säger att jag behöver injicera mina data i line() via line(data) för att ha egna data.

var line = d3.line(data)
    .x((d: ChartData) => {return x1(d.q);})
    .y((d: ChartData) => {return y(d.p);});

Vilket sedan resulterar i detta fel...

FEL i [default] file.ts:259:13 De angivna parametrarna matchar ingen signatur av anropsmålet.

...trots att d3-dokumentationen säger att jag borde kunna göra det. Så vad gör jag fel?

Svar #1

Din första syntax (utan att skicka data) är korrekt. Jag tror att du bara behöver tala om för TypeScript vad du skickar till d3.line som:

var line = d3.line<ChartData>()
  .x((d: ChartData) => {return x1(d.q);})
  .y((d: ChartData) => {return y(d.p);});

Det försöker kompilera med standardinställningen som är:

d3.line<[number, number]>

Relaterade artiklar