title: typescript line chart d3
body: <p>I am new to d3 and typescript.</p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/bUxph.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bUxph.png" alt=""></a></p>
  
  <p>What is the problem?</p>
  
  <pre><code>//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');
  </code></pre>