https://github.com/wandri/angular-d3js-responsive-template
Template for using D3js with angular and responsivity.
https://github.com/wandri/angular-d3js-responsive-template
angular d3 d3js responsive
Last synced: 2 months ago
JSON representation
Template for using D3js with angular and responsivity.
- Host: GitHub
- URL: https://github.com/wandri/angular-d3js-responsive-template
- Owner: wandri
- Created: 2019-03-15T12:40:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-15T13:11:37.000Z (over 7 years ago)
- Last Synced: 2025-10-06T00:33:20.081Z (9 months ago)
- Topics: angular, d3, d3js, responsive
- Size: 1.95 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Responsive Angular D3js Graph
Create your graph component
### `component.html`
```
```
### `component.ts`
```
export class ChartComponent implements OnInit, OnChanges {
@Input()
data: ChartDatum[] = [];
@Input()
height: string = 200;
private svg;
private graphContainer;
private width: number;
private height: number;
@HostListener('window:resize', ['$event'])
onResize() {
this.reloadChart();
}
constructor(private container: ElementRef) {
}
ngOnInit() {
setTimeout(() => {
this.initializeSvg();
this.generateGraphFromData();
});
}
ngOnChanges(): void {
if ( this.contentContainer ) {
this.generateGraphFromData();
}
}
private initializeSvg() {
const chartElement = this.container.nativeElement.querySelector('.chart');
const wrapper = select(chartElement);
const widthWrapper = chartElement.clientWidth;
const heightWrapper = this.height;
const margin = {
top: 10,
right: 10,
bottom: 10,
left: 10
};
this.width = widthWrapper - margin.left - margin.right;
this.height = heightWrapper - margin.top - margin.bottom;
this.svg = wrapper.append('svg')
.attr('width', widthWrapper + margin.left + margin.right)
.attr('height', this.height + margin.top + margin.bottom);
const svgContainer = this.svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
this.graphContainer = svgContainer.append('g')
.attr('class', 'graph-container');
}
private generateGraphFromData() {
// Do What ever your chart need to do inside `this.graphContainer`
}
private reloadChart() {
const wrapper = select(this.container.nativeElement.querySelector('.chart'));
wrapper.select('svg').remove();
this.initializeSvg();
this.generateGraphFromData();
}
}
```
### Explanation
> ```
> @HostListener('window:resize', ['$event'])
> onResize() {
> this.reloadChart();
> }
> ```
Each time the window is reduced or increased, `reloadChart` is called. It delete the `svg` and its chidren and recreate the chart.