D3 Bar chart is not rendering in angular 5

Question

I am trying to render a D3 bar chart in angular 5. I have installed d3 graph using command

npm install d3

But when I am using it with angular 5 the chart is not getting rendered. My Html code is :

         <button (click)= 'getGraph()'>show</button>
          <div class="chart">
          </div>

My ts file :

    import { Component, OnInit } from '@angular/core';
     import * as d3 from 'd3';
     @Component({
      selector: 'app-dashboard',
      templateUrl: './dashboard.component.html',
      styleUrls: ['./dashboard.component.css']
       })
       export class DashboardComponent{
            data= [10,20,30,40,50,60]
           constructor() 
           {

            }
           ngOnInit() {
           } 

           getGraph() {
                d3.select(".chart")
                .selectAll("div")
                .data(this.data)
                .enter()
                .append("div")
                .style("width", function(d) { return d + "px"; })
                .text(function(d) { return d; });
           }
       }

My CSS file :

.chart div {
font: 10px sans-serif;
background-color: red;
text-align: right;
padding: 3px;
margin: 1px;
color: white;

}

The values are showing in different positions but graphs are not forming. Is there anything wrong with the execution. Same code is working in pure JS.

Here is in stackblitz: https://stackblitz.com/edit/angular-rxgsv6?embed=1&file=src/app/app.component.html

Note : I took the code from this official link : https://scrimba.com/p/pEKMsN/cast-1953

It works fine in pure JS

ANSWER : Writing the style tags in global CSS instead of component CSS fixed it

Answer 1

It is very easy to integrate D3js with Angular and start building SPA with power of D3js.

Steps:

Create new Angular project using angular/cli

ng new d3-ng5-demo

Once new project is created and dependencies are installed, install D3js

 npm install d3

Import D3 and start using it inside your components. For example, import “d3” in app.component.ts file as below:

import * as d3 from “d3”;

Select your HTML element using d3js for data join operation/DOM operation. ngAfterContentInit() life cycle hook is best place to select element using D3 since by this time, DOM is ready for current component.

ngAfterContentInit() {
d3.select(“p”).style(“color”, “red”);
}

If you have <p> tag inside app.component.html file, once browser is done loading app.component, <p> tag shall have color red.

Resolving “ this ” scope

In Angular, inside .ts file “this” object is used to refer member variable(s) and member function(s). Whereas in D3js, “this” object is filled with selected HTML element.

Consider a scenario, we want to draw circle on mouse click position on app.component.html. We shall keep “radius” of circle as a member variable of AppComponent class.

Solution:

Pass $event argument to click event handler on tag

<svg width=”100%” height=”1200" class=”mySvg” (click)=”clicked($event)”> Click event handler inside.ts:

clicked(event: any){
d3.select(event.target).
append('circle').
attr('cx' , event.x).
attr('cy' , event.y).
attr('r' , this.radius).
attr('fill' , 'red')
 }

That's it! In browser, if you click anywhere in <svg> tag; you shall see red circle being plotted at mouse position with radius 10.