d3v4 + Typescript + angular2 error using d3.line().x((d) => {function})

Question

So I have this...

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

I'm getting an error on the .x(d: ChartData) line saying:

Argument of type '(d: ChartData) => any' is not assignable to parameter of type '(d: [number, number], index: number, data: [number, number][]) => number'. Types of parameters 'd' and 'd' are incompatible. Type '[number, number]' is not assignable to type 'ChartData'. Property 'q' is missing in type '[number, number]'.

Which I then look at the documentation for d3, which says that I need to inject my data into line() via line(data) to have a custom data.

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

Which then results in this error...

ERROR in [default] file.ts:259:13 Supplied parameters do not match any signature of call target.

...despite the d3 documentation saying that I should be able to do so. So what am I doing wrong?

Mark · Accepted Answer · 2017-02-18 22:30:12Z

32

Your first syntax (without passing data) is correct. I think you just have to tell TypeScript what you are passing to d3.line like:

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

It's attempting to compile with the default which is:

d3.line<[number, number]>

edited Feb 18, 2017 at 22:30

answered Feb 18, 2017 at 14:15

Mark

109k20 gold badges180 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jon Thompson Over a year ago

That results in "ERROR in [default] file.ts:259:13 Supplied parameters do not match any signature of call target." as well.

Mark Over a year ago

@JonThompson, I screwed the syntax up, it should be d3.line<ChartData>() not d3.line()<ChartData>

Victor Shelepen Over a year ago

I have a such code, but I get another error - Error:(45, 18) TS2345:Argument of type 'Line<ChartData>' is not assignable to parameter of type 'ValueFn<BaseType, { p: number; q: number; }, string | number | boolean>'. Types of parameters 'data' and 'datum' are incompatible. Type '{ p: number; q: number; }' is not assignable to type 'ChartData[]'. Property 'includes' is missing in type '{ p: number; q: number; }'.

Victor Shelepen Over a year ago

There is my problem :) stackoverflow.com/questions/46976677/… Regards

Collectives™ on Stack Overflow

d3v4 + Typescript + angular2 error using d3.line().x((d) => {function})

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related