[英]d3v4 + Typescript + angular2 error using d3.line().x((d) => {function})
所以我有這個...
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);});
然后導致此錯誤...
[默認] 文件中的錯誤.ts:259:13 提供的參數與調用目標的任何簽名都不匹配。
...盡管 d3 文檔說我應該能夠這樣做。 那么我做錯了什么?
您的第一個語法(不傳遞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]>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.