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

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?
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 ='#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')
.attr('cx', function (d) { return d.xpos; })
.attr('cy', function (d) { return d.ypos;})
.attr('r',function (d) { return d.radious;})
.style('fill', function (d) { return d.highlight;});
Run the project and see the result
Code Action @Stackblitz

Post a Comment