Angular + Таблица материалов + D3. Js - Таблица не заполняется, заполняется только диаграмма

Question

Найдите StackBlitz . Здесь я создал код, используя Angular Таблица материалов и D3 Js.

Справка - Невозможно заполнить данные источника данных в App.component. html ...

Я пробовал использовать теги table и mat-table в App.component. html .. Не удалось добавить [DataSource] в тег mat-table. Ниже в таблице матов появляется ошибка

Error is not coming in table tag but even data not populates.

Only chart is populates using D3.js. Table is not populates using Angular Material Table.

I attached my StackBize код здесь

Вот код из App.Component. html

<div class="mat-elevation-z8 data-table">

<mat-table class="data-table"  [dataSource]="dataSource" matSort aria-label="Elements">
  <ng-container matColumnDef="letter">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Letter</th>
    <td mat-cell *matCellDef="let row">{{row.letter}}</td>
  </ng-container>

 <ng-container matColumnDef="frequency">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Frequency</th>
    <td mat-cell *matCellDef="let row">{{row.frequency}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</mat-table>
 </div>
<svg width="960" height="500"></svg>

Вот код из App.Component.ts

import { Component, ViewEncapsulation,ViewChild } from "@angular/core";
import * as d3 from "d3-selection";
import * as d3Scale from "d3-scale";
import * as d3Array from "d3-array";
import * as d3Axis from "d3-axis";
import { STATISTICS } from "./statistics";
import { DataTableDataSource, Frequency } from './statistics';
import { MatTable } from '@angular/material/table';

@Component({
  selector: "app-root",
  encapsulation: ViewEncapsulation.None,
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
 })
 export class AppComponent {

 @ViewChild(MatTable, {static:true}) table: MatTable<Frequency>;

 dataSource: DataTableDataSource;
  /** Columns displayed in the table. Columns IDs can be added, removed, 
  or reordered. */
 displayedColumns = ['letter', 'frequency'];

 data = DataTableDataSource;

 title = "Bar Chart Nimish";

  private width: number;
  private height: number;
  private margin = { top: 20, right: 20, bottom: 30, left: 40 };

  private x: any;
  private y: any;
  private svg: any;
  private g: any;
   
 constructor() {}


  ngOnInit() {
  this.initSvg();
  this.initAxis();
  this.drawAxis();
  this.drawBars();
  console.log(this.data);
 }

  private initSvg() {
  this.svg = d3.select("svg");
  this.width = +this.svg.attr("width") - this.margin.left - 
  this.margin.right;
  this.height =
  +this.svg.attr("height") - this.margin.top - this.margin.bottom;
  this.g = this.svg
  .append("g")
  .attr(
    "transform",
    "translate(" + this.margin.left + "," + this.margin.top + ")"
    );
  }

   private initAxis() {
   this.x = d3Scale
           .scaleBand()
           .rangeRound([0, this.width])
           .padding(0.1);
   
   this.y = d3Scale.scaleLinear().rangeRound([this.height, 0]);
   this.x.domain(STATISTICS.map(d => d.letter));
   this.y.domain([0, d3Array.max(STATISTICS, d => d.frequency)]);
  }

   private drawAxis() {
   this.g
    .append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + this.height + ")")
    .call(d3Axis.axisBottom(this.x));
     this.g
    .append("g")
    .attr("class", "axis axis--y")
    .call(d3Axis.axisLeft(this.y).ticks(10, "%"))
    .append("text")
    .attr("class", "axis-title")
    .attr("transform", "rotate(-90)")
    .attr("y", -40)
    .attr("x", -200)
    .attr("dy", "0.71em")
    .text("Frequency");
  }

  private drawBars() {
   this.g
    .selectAll(".bar")
    .data(STATISTICS)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("x", d => this.x(d.letter))
    .attr("y", d => this.y(d.frequency))
    .attr("width", this.x.bandwidth())
    .attr("height", d => this.height - this.y(d.frequency));
   }

  }