{"id":23735611,"url":"https://github.com/wandri/angular-d3js-responsive-template","last_synced_at":"2026-04-25T22:34:00.136Z","repository":{"id":128381011,"uuid":"175818060","full_name":"wandri/angular-d3js-responsive-template","owner":"wandri","description":"Template for using D3js with angular and responsivity.","archived":false,"fork":false,"pushed_at":"2019-03-15T13:11:37.000Z","size":2,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-06T00:33:20.081Z","etag":null,"topics":["angular","d3","d3js","responsive"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wandri.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-03-15T12:40:52.000Z","updated_at":"2019-03-15T15:56:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"f001187a-5912-4a55-a54e-2c318df0bb2c","html_url":"https://github.com/wandri/angular-d3js-responsive-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wandri/angular-d3js-responsive-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wandri%2Fangular-d3js-responsive-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wandri%2Fangular-d3js-responsive-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wandri%2Fangular-d3js-responsive-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wandri%2Fangular-d3js-responsive-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wandri","download_url":"https://codeload.github.com/wandri/angular-d3js-responsive-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wandri%2Fangular-d3js-responsive-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32279656,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T18:29:39.964Z","status":"ssl_error","status_checked_at":"2026-04-25T18:29:32.149Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","d3","d3js","responsive"],"created_at":"2024-12-31T06:20:18.720Z","updated_at":"2026-04-25T22:34:00.132Z","avatar_url":"https://github.com/wandri.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Responsive Angular D3js Graph\n\nCreate your graph component\n\n### `component.html`\n```\n\u003cdiv class=\"chart\"\u003e\u003c/div\u003e\n```\n\n### `component.ts`\n```\nexport class ChartComponent implements OnInit, OnChanges {\n\n  @Input()\n  data: ChartDatum[] = [];\n\n  @Input()\n  height: string = 200;\n\n  private svg;\n  private graphContainer;\n  private width: number;\n  private height: number;\n\n  @HostListener('window:resize', ['$event'])\n  onResize() {\n    this.reloadChart();\n  }\n\n  constructor(private container: ElementRef) {\n  }\n\n  ngOnInit() {\n    setTimeout(() =\u003e {\n      this.initializeSvg();\n      this.generateGraphFromData();\n    });\n  }\n\n  ngOnChanges(): void {\n    if ( this.contentContainer ) {\n      this.generateGraphFromData();\n    }\n  }\n\n  private initializeSvg() {\n    const chartElement = this.container.nativeElement.querySelector('.chart');\n    const wrapper = select(chartElement);\n\n    const widthWrapper = chartElement.clientWidth;\n    const heightWrapper = this.height;\n    const margin = {\n      top: 10,\n      right: 10,\n      bottom: 10,\n      left: 10\n    };\n\n    this.width = widthWrapper - margin.left - margin.right;\n    this.height = heightWrapper - margin.top - margin.bottom;\n\n    this.svg = wrapper.append('svg')\n      .attr('width', widthWrapper + margin.left + margin.right)\n      .attr('height', this.height + margin.top + margin.bottom);\n\n    const svgContainer = this.svg.append('g')\n      .attr('transform', `translate(${margin.left},${margin.top})`);\n\n    this.graphContainer = svgContainer.append('g')\n      .attr('class', 'graph-container');\n  }\n\n  private generateGraphFromData() {\n     // Do What ever your chart need to do inside `this.graphContainer`\n  }\n\n  private reloadChart() {\n    const wrapper = select(this.container.nativeElement.querySelector('.chart'));\n    wrapper.select('svg').remove();\n    this.initializeSvg();\n    this.generateGraphFromData();\n  }\n}\n\n```\n\n### Explanation\n\n\u003e ```\n\u003e @HostListener('window:resize', ['$event'])\n\u003e onResize() {\n\u003e   this.reloadChart();\n\u003e }\n\u003e ```\n\nEach time the window is reduced or increased, `reloadChart` is called. It delete the `svg` and its chidren and recreate the chart.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwandri%2Fangular-d3js-responsive-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwandri%2Fangular-d3js-responsive-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwandri%2Fangular-d3js-responsive-template/lists"}