我无法使用D3在Angular中运行创建折线图，“类型[数字，数字]上不存在属性'日期'”

Question

我正在尝试使用D3和Angular运行我的第一个代码。到目前为止，我在网上找到的所有示例都呈现出类似于以下代码的内容（使用纯JavaScript）。

我总是遇到相同的错误：

//property 'date' doesn't exist on type [number, number]
//property 'value' doesn't exist on type [number, number]

我想念什么？

我总是被困在

import { Component, OnInit, OnChanges } from '@angular/core';
import * as d3 from 'd3';

@Component({
 selector: 'app-intro-demo',
 templateUrl: './intro-demo.component.html',
 styleUrls: ['./intro-demo.component.css']
})
export class IntroDemoComponent implements OnInit {
  rawData = [{ date: "10/25/2018", value: 1 },
  { date: "10/26/2018", value: 3 },
  { date: "10/27/2018", value: 0 },
  { date: "10/28/2018", value: 0 },
  { date: "10/29/2018", value: 5 },
  { date: "10/30/2018", value: 8 },
  { date: "10/31/2018", value: 7 },
  { date: "11/01/2018", value: 11 },
  { date: "11/02/2018", value: 23 },
  { date: "11/03/2018", value: 13 },
  { date: "11/04/2018", value: 15 },
  { date: "11/05/2018", value: 37 },
  { date: "11/06/2018", value: 32 },
  { date: "11/07/2018", value: 38 },
  { date: "11/08/2018", value: 42 },
  { date: "11/09/2018", value: 43 },
  { date: "11/10/2018", value: 21 },
  { date: "11/11/2018", value: 24 },
  { date: "11/12/2018", value: 50 },
  { date: "11/13/2018", value: 53 },
  { date: "11/14/2018", value: 59 },
  { date: "11/15/2018", value: 61 },
  { date: "11/16/2018", value: 62 }];

  margin = 50;
  width = 1024;
  height = 768;

  data = [];
  parseTime = d3.timeParse("%m/%d/%Y");

  constructor() { }

  ngOnInit() {
    this.rawData.forEach(d => {
       this.data.push({ date: this.parseTime(d.date), value: d.value })
    });

    this.createChart();
  }

  createChart() {
     const svg = d3.select('#chart')
     .append('svg')
     .attr('width', this.width + this.margin)
     .attr('height', this.width + 2 * this.margin)
   ;

    const dataGroup = svg.append('g')
        .attr("transform", "translate(" + this.margin + ", " + this.margin + ")");

    // Add X axis --> it is a date format
    const x = d3.scaleTime()
       .domain(d3.extent(this.data, d => d.date))
       .range([0, this.width]);

    svg.append("g")
       .attr("transform", "translate(0," + this.height + ")")
       .call(d3.axisBottom(x));

    // Add Y axis
    const y = d3.scaleLinear()
       .domain([0, d3.max(this.data, function (d) { return +d.value; })])
       .range([this.height, 0]);

    svg.append("g")
       .call(d3.axisLeft(y));

    const line = d3.line() //
      .x(d => x(d.date))   //property 'date' doesn't exist on type [number, number]
      .y(d => y(d.value)); //property 'date' doesn't exist on type [number, number]

   // Add the line
   svg.append("path")
      .datum(this.data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", line)

  }