打字稿折线图 d3

Question

我是 d3 和打字稿的新手。

我正在尝试使用 d3 v4 和 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

正如在打字文件中可以看到的 您正在调用的 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);

这将使您的数据类型为“任何”，以便打字稿编译器不会抱怨您当前传递给它的值。

或者（最好）因为您使用的是 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);