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
0 Comments