TypeScript折线图D3

Question

TypeScript折线图D3

typescriptd3.js

9

我刚接触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');

- Kevin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- peinearydevelopment · Accepted Answer

从的 typings 文件中可以看到，你调用的 line 函数默认返回一个 Tuple 类型的 Line。不过你也可以告诉 typescript 你的数据类型是什么。

要解决这个问题，你可以将 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编译器不会对您当前传递的值进行投诉。

或者（更好的选择）由于您正在使用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);