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

I don't anything related to a graph in the code above. Its just rendering divs for each element in the data set - and this seems to work in the link you provided. Am I misunderstanding something? — user2065736
Where is the code for that? Can you please share it? What are you referring to as a graph? The code you've shared so far renders divs — user2065736
You can't style the divs in the component's stylesheet. Style in global stylesheet. Since you are creating your divs without Angular, the needed attribute for view encapsulation are missing and therefore the styles do not apply. — Ploppy

Mojtaba Nava Mojtaba Nava · Accepted Answer · 2018-07-28T09:45:09

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.

D3 Bar chart is not rendering in angular 5

1 Answers