Angular 7 D3| Data Structures Using D3|D3| D3 Part6

Data Structures To SVG Elements Using D3

Before we start to Apply Data Structures To SVG Elements 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

Data Structures To SVG Elements Using D3

In this lab you will understand how to apply data structure to SVG elements using D3.

What are the data structure available in Typescript?

Stack,Queue,Array,Etc.

Here We are going to apply array of user defined type to SVG element

Create User Defined Type

Declare User Defined Type as below

export class lab6type {
public xpos: number = 0;
public ypos: number = 0;
public radious: number = 0;
public highlight: string ='';
}

Create DataSet 

export const lab6data:lab6type[] = [
{ xpos: 20,ypos: 20,radious: 10,highlight: 'red'},
{ xpos: 40,ypos: 40,radious: 10,highlight: 'green'},
{ xpos: 60,ypos: 60,radious: 10,highlight: 'yellow'},
{ xpos: 80,ypos: 80,radious: 10,highlight: 'white'},
{ xpos: 100,ypos: 100,radious: 10,highlight: 'orange'},
];

In Component.ts

Access circleelementdatabound using D3.Select

let divcircleelementdatabound = d3.select('#circleelementdatabound');

SVG element added inside the selected div element using D3 append method

let svgforcircleelements = divcircleelementdatabound.append('svg')
.attr('width', 500)
.attr('height', 500);

Apply the Dataset to D3 to create circle using D3 append data method

let circleelements = svgforcircleelements.selectAll('circle')
.data(lab6data)
.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