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

• D3 Part 1 - SVG Shapes
• D3 Part 2-  D3 + Angular 7 Integration 
• D3 Part 3-  D3 Data Bound to DOM Elements
• D3 Part 4-  D3 Creating SVG Elements Based on Data
• D3 Part 5-  D3 SVG Coordinate Space
• D3 Part 6-  Data Structures Using D3

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