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();
  }

  @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 xScale = d3.scaleLinear()
    .domain([0, 10])
    .range([0, this.width]);

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

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

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

    // sin wave with circles
    this.svg
    .append("g")
    .selectAll("circle")
    .data([
      {x: xScale(0), y: yScale(0)}, 
      {x: xScale(Math.PI / 2), y: yScale(Math.sin(Math.PI / 2))},
      {x: xScale(Math.PI), y: yScale(Math.sin(Math.PI))},
      {x: xScale(3 * Math.PI / 2), y: yScale(Math.sin(3 * Math.PI / 2))},
      {x: xScale(2 * Math.PI), y: yScale(Math.sin(2 * Math.PI))}
     ])
    .enter()
    .append("circle")
    .attr("cx", (d: any) => { return d.x; })
    .attr("cy", (d: any) => { return d.y; })
    .attr("r", 10);

    // sin wave with path element

  }

}