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

• 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.
• D3 Part 7-  Dynamic SVG Coordinate Space Using D3.
• D3 Part 8-  Basic D3 Array Utilities.

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