打字稿折線圖d3

Question

我是d3和打字稿的新手。

我正在嘗試使用d3 v4和打字稿創建一個簡單的折線圖。 但是，我收到一個打字稿錯誤，如下圖所示：

問題是什么？

//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

在類型文件中可以看到 默認情況下，您正在調用的line函數將返回Tuple類型的Line。 或者，您可以告訴打字稿您的數據是什么類型。

要解決此問題，可以將線路生成器更改為：

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

這將使您的數據類型為“ any”，以便打字稿編譯器不會抱怨您當前傳遞給它的值。

另外（並且最好），因為您使用的是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._linearYScale(d['yData']);
    })
    .curve(d3.curveBasis);