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.

No comments

Post Top Ad

Post Bottom Ad