数据更改Angular 8时更新d3图表

Question

我已经看到很多相关的问题，但是我似乎无法将它们与此相关。

我有一个Angular 8应用，它带有angular-d3-charts组件，当我在列表中选择一个新值时，我想对其进行更新。组件ts如下：

 import { Component, OnInit } from "@angular/core";
import { UFOSighting } from "../ufo";
import { UFOSIGHTINGS } from "../mock-ufos";

@Component({
  selector: "app-ufo-component",
  templateUrl: "./ufo-component.component.html",
  styleUrls: ["./ufo-component.component.css"]
})
export class UfoComponent implements OnInit {
  ufosightings = UFOSIGHTINGS;
  selectedSighting: UFOSighting;
  start = 0;
  end = 4;
  disabledInc = false;
  disabledDec = true;
  oddsData = [
    {
      id: 0,
      label: "chances of seeing a ufo",
      value: 10,
      color: "red"
    },
    {
      id: 1,
      label: "chances of not seeing a ufo",
      value: 90,
      color: "blue"
    }
  ];

  onSelect(ufosighting: UFOSighting): void {
    this.selectedSighting = ufosighting;
    this.oddsData = [
      {
        id: 0,
        label: "chances of seeing a ufo",
        value: this.selectedSighting.odds,
        color: "red"
      },
      {
        id: 1,
        label: "chances of not seeing a ufo",
        value: 100 - this.selectedSighting.odds,
        color: "blue"
      }
    ];
  }

  constructor() {}

  onIncrement(): void {
    if (this.end + 1 > this.ufosightings.length) {
      this.disabledInc = true;
    } else {
      this.start += 1;
      this.end += 1;
      this.disabledInc = false;
      this.disabledDec = false;
    }
  }

  onDecrement(): void {
    if (this.start - 1 < 0) {
      this.disabledDec = true;
    } else {
      this.start -= 1;
      this.end -= 1;
      this.disabledDec = false;
      this.disabledInc = false;
    }
  }

  ngOnInit() {}
}

onSelect函数会在第一次调用图表时更新图表，但不会在之后调用。如何获取图表以观察变化？我看到了一个类似问题的答案，说我应该注意$ scope-不知道这是AngularJS还是在此处实现该方法