D3-形状誤差角度2

Question

にラインを作成するとき、私はそれにMike Bostock's articleあたりとして、D3 V4の折れ線グラフを実装しようとしていますが、私はD3のV4と必要ながインストールされている角度2.

でこれをやっていますタイピング私package.jsonから抽出します。

"@types/d3": "^4.9.0", 
"@types/d3-array": "^1.2.0", 
"@types/d3-axis": "^1.0.8", 
"@types/d3-scale": "^1.0.6", 
"@types/d3-shape": "^1.2.0", 
"@types/d3-time-format": "^2.0.5", 
... 
"d3": "4.9.0", 
"d3-array": "^1.2.0", 
"d3-axis": "^1.0.8", 
"d3-scale": "^1.0.6", 
"d3-shape": "^1.2.0", 
"d3-time-format": "^2.0.5", 

line変数を作成しようとしたとき、それは[number, number]を期待しているが、ガイドごとのように私はそれをデータの項目を渡す必要があり、ここでそれのでしかし、私は、エラーが発生します日付と値を取得できます。私のコードは次のとおりです。

var line = d3Shape.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.value); }); 

これが発生2つのエラーは、次のとおりです。

Property 'date' does not exist on type '[number, number]'. 
Property 'value' does not exist on type '[number, number]'. 

は、このエラーが発生しました誰を持っており、解決する方法を知っていますか？

Answer 1

私は以前これを経験していました。タイピングのために多くの混乱がありました。私はアンギュラ4.xを使用していたし、同じ問題で立ち往生した。

まずD3ラインのためのデータの型を宣言：

export type LineData = { date: any, value: any }; 

すると以下のように一般的な方法を使用して、それを使用します。ここでは救助に来たソリューションはtypescriptですが、種類やジェネリックについて知る作るために単にでした

var line = d3Shape.line<LineData>() 
    .x(function(d) { return this.x(d.date); }) 
    .y(function(d) { return this.y(d.value); }); 

希望します。