タイコスクリプト折れ線グラフd3

Question

d3とtypescriptを初めて使用しています。

d3 v4とtypescriptを使用して簡単な折れ線グラフを作成しようとしています。 は、しかし、私は以下の画像のようにtypescriptですエラーを得た：

問題は何ですか？あなたが呼び出しているライン機能は、デフォルトではタイプのタプルのラインを返してのためのタイピングファイルに見ることができるように

//appending svg to HTML 
var canvas = d3.select("body") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .attr("transform", "translate(" + margin.left + "," + margin.right + ")"); 
//sample data -- initial scale data 
var sampleData = [{ 
    "yData": 202, 
    "xData": 2000 
}, { 
    "yData": 215, 
    "xData": 2001 
}, { 
    "yData": 179, 
    "xData": 2002 
}, { 
    "yData": 199, 
    "xData": 2003 
}, { 
    "yData": 134, 
    "xData": 2003 
}, { 
    "yData": 176, 
    "xData": 2010 
}]; 
var initialXmin = d3.min(sampleData, function (d) { return d.xData; }); 
var initialXMax = d3.max(sampleData, function (d) { return d.xData; }); 
var initialYmin = d3.min(sampleData, function (d) { return d.yData; }); 
var initialYMax = d3.max(sampleData, function (d) { return d.yData; }); 
var linearXScale = d3.scaleLinear() 
    .domain([initialXmin, initialXMax]) 
    .range([margin.left, width - margin.right]); 
var linearYScale = d3.scaleLinear() 
    .domain([initialYMax, initialYmin]) 
    .range([margin.top, height - margin.bottom]); 
var xAxis = d3.axisBottom(linearXScale); 
var yAxis = d3.axisRight(linearYScale); 
//create x Axis 
canvas.append("g") 
    .attr("transform", "translate(0," + (height - margin.bottom) + ")") 
    .call(xAxis); 
//create y Axis 
canvas.append("g") 
    .attr("transform", "translate(" + margin.left + " ,0)") 
    .call(yAxis); 

// define the line 

var lineGenerator = d3.line() 
    .x(function (d) { 
     return this._linearXScale(d['xData']); 
     //return linearXScale(d["x_value"]); 
    }) 
    .y(function (d) { 
     return this._linearXScale(d['yData']); 
    }) 
    .curve(d3.curveBasis); 

//create the line 
canvas.append("path") 
    .attr("d", lineGenerator(sampleData)) 
    .attr('stroke', 'green') 
    .attr('stroke-width', 2) 
    .attr('fill', 'none'); 

Answer 1

。あるいは、あなたのデータがどのタイプのものかをタイプコピーに伝えることができます。

問題を解決するには、ラインジェネレータを変更することができます。

var lineGenerator = d3.line<any>() 
    .x(function (d) { 
     return this._linearXScale(d['xData']); 
     //return linearXScale(d["x_value"]); 
    }) 
    .y(function (d) { 
     return this._linearXScale(d['yData']); 
    }) 
    .curve(d3.curveBasis); 

これはあなたのデータの種類を行います「は任意の」typescriptですコンパイラはあなたに渡している値は文句ないように、それは現在です。

Typescriptを使用しているので、代わりに（そしてできれば）強力なタイピングを利用します。

public interface MyData { 
    yData: number; 
    xData: number; 
} 

var sampleData: MyData[] = [{ 
    yData: 202, 
    xData: 2000 
}, { 
    yData: 215, 
    xData: 2001 
}, { 
    yData: 179, 
    xData: 2002 
}, { 
    yData: 199, 
    xData: 2003 
}, { 
    yData: 134, 
    xData: 2003 
}, { 
    yData: 176, 
    xData: 2010 
}]; 

var lineGenerator = d3.line<MyData>() 
    .x(function (d) { 
     return this._linearXScale(d['xData']); 
     //return linearXScale(d["x_value"]); 
    }) 
    .y(function (d) { 
     return this._linearXScale(d['yData']); 
    }) 
    .curve(d3.curveBasis);