Untitled
plain_text
a month ago
2.0 kB
5
Indexable
Never
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 } }