D3 Lab with Angular 7|D3 Setup|D3 with Angular 7 |D3 Lab with Angular Part2

D3 Setup | D3 with Angular 7

D3 Angular Integration -Part2

Refer SVG Shapes @ D3 Lab with Angular Part1. before starts with d3 have to set up the environment with angular.

Step 1:
Create an angular project refer  Angular step by step 
Step 2:
install D3 using below command

npm i d3

Step 3: 
import d3 to required component.ts

import * as d3 from 'd3';

Step 4:
Create a <p> tag in html template

<p>D3 Lab 2 , P Tag color changed...</p>

Step 5:
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() {
  // Select <p> element using d3 and change style..
    d3.select('p').style('color', 'red');
}

Step 6 : 
now run the project and see the output of p tag fore color.
Step 7 : 
now create a svg in html template

<svg class="mysvg" width="400px" height="400px" (click)="svgclickhandle($event)"/>

Step 8 :
Click event handler inside .ts file

radius: number=15;
clickeventcount: number =0 ;
svgclickhandle(event: any ) {
  this.clickeventcount+=1;
  let colorname = 'black';
if (this.clickeventcount % 5 === 0)  {
    colorname ='red';
} else if (this.clickeventcount % 3 === 0) {
  colorname ='yellow';
} else if (this.clickeventcount % 2 === 0) {
  colorname ='purple';
}
d3.select(event.target).
  append('circle').
  attr('cx', event.x).
  attr('cy',event.y).
  attr('r',this.radius).
  attr('fill',colorname);
}

Step 9 : 
Run the project and see the result

Code Action @Stackblitz 
here we done the d3 integration with angular, next lab will be Data Bound to DOM Elements.