/
group-element-d3.ts
82 lines (68 loc) · 2.67 KB
/
group-element-d3.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import {Component, ElementRef} from '@angular/core';
import * as d3 from 'd3-selection';
@Component({
selector: 'page-group-element-d3',
templateUrl: 'group-element-d3.html',
})
export class GroupElementD3Page {
constructor(private elementRef: ElementRef) {}
ionViewDidLoad() {
this.elementRef.nativeElement.querySelectorAll('.svg-element').forEach((container) => {
this.createSVG('#' + container.id, JSON.parse(container.getAttribute('data-transformations')));
});
}
createSVG(wrapperId: string, transformations?: [{group: string, properties: string[]}]): void {
const circleData = [
{ cx: 20, cy: 20, radius: 20, color : 'green' },
{ cx: 70, cy: 70, radius: 20, color : 'purple' }];
const rectangleData = [
{ rx: 110, ry: 110, height: 30, width: 30, color : 'blue' },
{ rx: 160, ry: 160, height: 30, width: 30, color : 'red' }];
const svgContainer = d3.select(wrapperId).append('svg')
.attr('width', 200)
.attr('height', 200);
// Appending an SVG Group Element to the already defined SVG Container
const circleGroup = svgContainer.append('g');
const rectangleGroup = svgContainer.append('g');
// Add circles to the group container
const circles = circleGroup.selectAll('circle')
.data(circleData)
.enter()
.append('circle');
circles
.attr('cx', (d) => d.cx)
.attr('cy', (d) => d.cy)
.attr('r', (d) => d.radius)
.style('fill', (d) => d.color);
// Add rectangles to the group container
const rectangles = rectangleGroup.selectAll('rect')
.data(rectangleData)
.enter()
.append('rect');
rectangles
.attr('x', (d) => d.rx)
.attr('y', (d) => d.ry)
.attr('height', (d) => d.height)
.attr('width', (d) => d.width)
.style('fill', (d) => d.color);
// Transform the groups
if (transformations) {
transformations.forEach((transformation) => {
let group = null;
switch (transformation.group) {
case 'circles':
group = circleGroup;
break;
case 'rectangles':
group = rectangleGroup;
break;
}
if (group) {
transformation.properties.forEach((property) => {
group.attr('transform', property);
});
}
});
}
}
}