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