typescript line chart d3

Question

I am new to d3 and typescript.

I am trying to create a simple line chart by using d3 v4 and typescript. However, I got a typescript error as in the following image:

What is the problem?

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

As can be seen in the typings file for the line function you are calling is returning a Line of type Tuple by default. Alternatively you can tell typescript what type your data is.

To solve the issue, you can change line generator to:

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

This will make the type of your data 'any' so that the typescript compiler won't complain about the value you are passing into it currently.

Alternatively(and preferably) since you are using Typescript, you will utilize its strong typing.

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