Highlighting chart elements on click
diff --git a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
index d0e86b3..b7d1be8 100644
--- a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
+++ b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
@@ -79,9 +79,7 @@
// Normalize for fixed-depth.
nodes.forEach(function(d) {
- console.log(d);
- // 180 should be based on window.width and max node depth
-
+ // position the child node horizontally
d.y = d.depth * (($window.innerWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
console.log(d.x);
});
@@ -96,12 +94,12 @@
.attr('transform', function(d) {
// this is the starting position
return 'translate(' + source.y0 + ',' + source.x0 + ')';
- })
- .on('click', click);
+ });
nodeEnter.append('circle')
.attr('r', 1e-6)
- .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; });
+ .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; })
+ .on('click', click);
nodeEnter.append('text')
.attr('x', function(d) { return d.children || d._children ? -13 : 13; })
@@ -175,16 +173,22 @@
});
}
- const click = (d) => {
- console.log(d);
- this.selectedService = {
+ this.instances = [];
+ this.slices = [];
+
+ var _this = this;
+ const click = function(d) {
+
+ d3.select(this).attr('r', 30);
+
+ _this.selectedService = {
id: d.id,
name: d.name
};
Slice.query({service: d.id}).$promise
.then(slices => {
- this.instances = null;
- this.slices = slices;
+ _this.instances = [];
+ _this.slices = slices;
})
};