Untitled

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

@Component({
  selector: 'app-fourier',
  templateUrl: './fourier.component.html',
  styleUrls: ['./fourier.component.css']
})
export class FourierComponent implements OnInit {

  constructor() { }

  // https://d3-angular-y61eai.stackblitz.io

  ngOnInit() {
    this.createSvg();
    this.drawAxes();

    this.svg
    .append("g")
    .attr("transform", "translate(0," + this.height + ")")
    .selectAll("circle")
    .data([
      {x: 0, y: 0}, 
      {x: Math.PI / 2, y: Math.sin(Math.PI / 2)},
      {x: Math.PI, y: Math.sin(Math.PI)},
      {x: 3 * Math.PI / 2, y: Math.sin(3 * Math.PI / 2)}
     ])
    .enter()
    .append("circle")
    .attr("cx", (d: any) => { return d.x; })
    .attr("cy", (d: any) => { return d.y; })
    .attr("r", 1);
  }

  @ViewChild("wrapper", { static: true }) svgContainer!: ElementRef;

  svg: any;
  private margin = 50;
  private width = 750 - (this.margin * 2);
  private height = 400 - (this.margin * 2);

  private createSvg(): void {
    this.svg = d3.select(this.svgContainer.nativeElement)
    .append("svg")
    .attr("width", this.width + (this.margin * 2))
    .attr("height", this.height + (this.margin * 2))
    .append("g")
    .attr("transform", "translate(" + this.margin + "," + this.margin + ")");
  }

  
  private drawAxes(): void {
    const x = d3.scaleLinear()
    .domain([-1, 1])
    .range([0, this.width]);

    const y = d3.scaleLinear()
    .domain([-1, 1])
    .range([this.height, 0]);

    //draw X Axis
    this.svg.append("g")
    .attr("transform", "translate(0," + this.height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
    .attr("transform", "translate(-10,0)rotate(-45)")
    .style("text-anchor", "end");

    // Draw the Y-axis
    this.svg.append("g")
    .call(d3.axisLeft(y));

  }

}