Adding and removing elements
diff --git a/views/ngXosViews/mcordTopology/src/js/bbu.js b/views/ngXosViews/mcordTopology/src/js/bbu.js
index 1192c1d..07ad474 100644
--- a/views/ngXosViews/mcordTopology/src/js/bbu.js
+++ b/views/ngXosViews/mcordTopology/src/js/bbu.js
@@ -2,19 +2,37 @@
angular.module('xos.mcordTopology')
.service('NodeDrawer', function(){
+
+ const duration = 500;
+
this.drawBbus = (nodes) => {
+
nodes.append('circle')
.attr({
class: d => d.type,
- r: 15
+ r: 0,
+ opacity: 0
+ })
+ .transition()
+ .duration(duration)
+ // .delay((d, i) => i * (duration / 2))
+ .attr({
+ r: 15,
+ opacity: 1
});
nodes.append('text')
.attr({
'text-anchor': 'middle',
- y: 4
+ y: 4,
+ opacity: 0
})
- .text('BBU')
+ .text(d => `BBU ${d.name.substr(d.name.length - 1, 1)}`)
+ .transition()
+ .duration(duration * 2)
+ .attr({
+ opacity: 1
+ });
};
this.drawRrus = (nodes) => {
@@ -22,13 +40,29 @@
nodes.append('circle')
.attr({
class: d => `${d.type}-shadow`,
- r: 30
+ r: 0,
+ opacity: 0
+ })
+ .transition()
+ .duration(duration * 2)
+ // .delay((d, i) => i * (duration / 2))
+ .attr({
+ r: 30,
+ opacity: 1
});
-
+
nodes.append('circle')
.attr({
class: d => d.type,
- r: 10
+ r: 0,
+ opacity: 0
+ })
+ .transition()
+ .duration(duration)
+ // .delay((d, i) => i * (duration / 2))
+ .attr({
+ r: 10,
+ opacity: 1
});
};
@@ -36,10 +70,19 @@
nodes.append('rect')
.attr({
class: d => d.type,
+ width: 0,
+ height: 0,
+ x: -10,
+ y: -10,
+ opacity: 0
+ })
+ .transition()
+ .duration(duration)
+ // .delay((d, i) => i * (duration / 2))
+ .attr({
width: 20,
height: 20,
- x: -10,
- y: -10
+ opacity: 1
});
};
@@ -47,14 +90,39 @@
nodes.append('circle')
.attr({
class: d => d.type,
- r: 15
+ r: 0,
+ opacity: 0
+ })
+ .transition()
+ .duration(duration)
+ // .delay((d, i) => i * (duration / 2))
+ .attr({
+ r: 15,
+ opacity: 1
});
nodes.append('text')
.attr({
'text-anchor': 'middle',
- y: 4
+ y: 4,
+ opacity: 0
})
.text(d => d.type)
+ .transition()
+ .duration(duration * 2)
+ .attr({
+ opacity: 1
+ });
+
+ };
+
+ this.removeElements = (nodes) => {
+ nodes
+ .transition()
+ .duration(duration)
+ .attr({
+ opacity: 0
+ })
+ .remove();
};
});
\ No newline at end of file