Angular 7 D3|SVG Group Element and D3|D3| D3 Part9

SVG Group Element and D3


Before we start to SVG Group Element and D3 refer
SVG Group Element and D3

In this lab we will understand the SVG group element
The SVG Group Element is a container that contains all child SVG elements defined inside of it.The SVG Group Element is defined by <g> and </g>.

Major Use of SVG Group element is 
  1. Grouping -To group a set of SVG elements that share the same attribute.
  2. Transforming - To define a new coordinate system for a set of SVG elements by applying a transformation to each coordinate specified in this set of SVG elements.

For Experiment starts with 3 Red Circles and 3 blue circles.
Step 1: Create a div with id circleelementdatabound in html template
<div id="circleelementdatabound" ></div>
Step 2: Import D3 in required component.ts
import * as d3 from 'd3';
Step 3:Create user defined class
export class D3lab9 {
public xpos: number = 0;
public ypos: number = 0;
public radious: number = 0;
public highlight: string ='';
}
Step 4:Create 2 different dataset as below 
export const lab9dataredcircle:D3lab9[] = [
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red'},
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red'},
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red'},
];
export const lab9databluecircle:D3lab9[] = [
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red'},
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red'},
{ xpos: 0,ypos: 0,radious: 0,highlight: 'red'},
];
Step 5: Inside ngOnInit() method  write the below code 
// 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', 1000)
.attr('height', 500);
//We add the SVG Group Element Transform Here
var bluecircleGroup = svgforcircleelements.append('g').attr('transform', 'translate(100,5)');
//Below Code For Dynamic Space 
let firstdata: D3lab9 = lab9databluecircle[0];
firstdata.xpos = 20;
firstdata.ypos = 20;
firstdata.radious = 10;
for (let i = 1; i < lab9databluecircle.length; i++) {
let prev: D3lab9 = lab9databluecircle[i-1];
let current: D3lab9 = lab9databluecircle[i];
current.radious = 10;
current.xpos = prev.xpos+50;
current.ypos = prev.ypos+50;
}
//Using bluecircle dataset applied inside the bluecircleGroup with transform translate x= 100,y =5
let circleelements = bluecircleGroup.selectAll('circle')
.data(lab9databluecircle)
.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', 'blue');
Once the above code applied the 3 circles derived from lab9databluecircle dataset & circles are created inside the bluecircleGroup <g></g> element.bluecircleGroup is  a group element and it has attribute transform with value translate(100,5). so the entire group moved to the new  position of x=100,y=5.
//We red circle  add the SVG Group Element Transform Here translate(<x> [<y>])
var redcircleGroup = svgforcircleelements.append('g').attr('transform', 'translate(200,5)');  
// Dynamic Space 
let redfirstdata: D3lab9 = lab9dataredcircle[0];
redfirstdata.xpos = 20;
redfirstdata.ypos = 20;
redfirstdata.radious = 10;
for (let i = 1; i < lab9dataredcircle.length; i++) {
let prev: D3lab9 = lab9dataredcircle[i-1];
let current: D3lab9 = lab9dataredcircle[i];
current.radious = 10;
current.xpos = prev.xpos+50;
current.ypos = prev.ypos+50;
}
//Red Cicle Creation
let  redcircleelements = redcircleGroup.selectAll('circle')
.data(lab9dataredcircle)
.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', 'red');
Step 6: Run the project and see the result
SVGGroupElement Dom View


transform translate applied to SVG group element
Code Action @ Stackblitz

Angular 7 D3|SVG Group Element and D3|D3| D3 Part9 Angular 7 D3|SVG Group Element and D3|D3| D3 Part9 Reviewed by interfacecreator on 7:58:00 PM Rating: 5

No comments:

Post Bottom Ad

Powered by Blogger.