Angular 7 D3|Dynamic SVG Coordinate Space Using D3|D3| D3 Part7

Dynamic SVG Coordinate Space Using D3

Before we start to SVG Basic Shapes Using D3 refer
Dynamic SVG Coordinate Space

In This Lab We will explain Dynamic space using D3 Data. Here we adjusting xpos and ypos with the help of for loop
Step 1: In Html template 
<div id="circleelementdatabound" ></div>
Step 2: Create Type using typecript class
export class D3lab7 {
public xpos: number = 0;
public ypos: number = 0;
public radious: number = 0;
public highlight: string ='';
}
Step 3: Create Data Set As Array of D3lab7
export const lab7data:D3lab7[] = [
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red'},
{ xpos: 0,ypos: 0,radious: 0,highlight: 'green'},
{ xpos: 0,ypos: 0,radious: 0,highlight: 'yellow'},
{ xpos: 0,ypos: 0,radious: 0,highlight: 'white'},
{ xpos: 0,ypos: 0,radious: 0,highlight: 'orange'},
];
Step 4: Import D3 at required Component
import * as d3 from 'd3';
Step 5: Apply below code on ngOnInit method 
//Div element selected from angular's Component
  let divcircleelementdatabound = d3.select('#circleelementdatabound');
//svg element added inside the selected div element
let svgforcircleelements = divcircleelementdatabound.append('svg')
.attr('width', 500)
.attr('height', 500);
//Set First Element Position
let firstdata: D3lab7 = lab7data[0];
firstdata.xpos = 25;
firstdata.ypos = 25;
firstdata.radious = 10;
//Dynamic Position
for (let i = 1; i < lab7data.length; i++) {
let prev: D3lab7 = lab7data[i-1];
let current: D3lab7 = lab7data[i];
current.radious = 10;
current.xpos = prev.xpos + (current.radious*2);
current.ypos = prev.ypos + (current.radious*2);
}
//Apply Data set to to create circle using D3 for Dynamic SVG Coordinate
let circleelements = svgforcircleelements.selectAll('circle')
.data(lab7data)
.enter()
.append('circle')
.attr('cx', function (d) { return d.xpos; })
.attr('cy', function (d) { return d.ypos;})
.attr('r',function (d) { return d.radious;})
.attr('stroke','black')
.attr('stroke-width','2')
.style('fill', function (d) { return d.highlight;});
}

Run the project and see the result.
Code Action @StackBlitz

Angular 7 D3|Dynamic SVG Coordinate Space Using D3|D3| D3 Part7 Angular 7 D3|Dynamic SVG Coordinate Space Using D3|D3| D3 Part7 Reviewed by interfacecreator on 9:40:00 PM Rating: 5

No comments:

Post Bottom Ad

Powered by Blogger.