d3v4 + Typescript + angular2错误使用d3.line().x((d)=> {function})

Question

所以我有这个......

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

我在.x(d:ChartData)行上收到错误说:

类型'(d:ChartData)=> any'的参数不能分配给'(d:[number,number],index:number,data:[number,number] [])=> number'类型的参数.参数"d"和"d"的类型不兼容.类型'[number,number]'不能分配给'ChartData'类型.'[number,number]'类型中缺少属性'q'.

然后我看看d3的文档,它说我需要通过line(data)将我的数据注入line()以获得自定义数据.

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

然后导致此错误...

[default] file.ts中的ERROR:259:13提供的参数与呼叫目标的任何签名都不匹配.

...尽管d3文档说我应该能够这样做.那么我做错了什么？

Answer 1

你的第一个语法(没有通过data)是正确的.我想你只需告诉TypeScript你传递的内容d3.line如下:

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

它正在尝试使用默认值进行编译,即:

d3.line<[number, number]>