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
- Grouping -To group a set of SVG elements that share the same attribute.
- 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
0 Comments