Centering text in graph nodes
Change-Id: Ibd6b4aeeebf85e529f2ae2a06b318d7f794f0da2
diff --git a/src/app/service-graph/components/coarse/coarse.component.ts b/src/app/service-graph/components/coarse/coarse.component.ts
index ed5d100..cfbfc32 100644
--- a/src/app/service-graph/components/coarse/coarse.component.ts
+++ b/src/app/service-graph/components/coarse/coarse.component.ts
@@ -24,6 +24,8 @@
private forceLayout;
private linkGroup;
private nodeGroup;
+ private textSize = 20;
+ private textOffset = this.textSize / 4;
// debounced functions
private renderGraph;
@@ -173,7 +175,8 @@
entering.append('text')
.attr({
- 'text-anchor': 'middle'
+ 'text-anchor': 'middle',
+ 'transform': `translate(0,${this.textOffset})`
})
.text(n => n.label);
// .text(n => `${n.id} - ${n.label}`);
@@ -189,7 +192,7 @@
width: textBBox.width + config.node.padding,
height: textBBox.height + config.node.padding,
x: textBBox.x - (config.node.padding / 2),
- y: textBBox.y - (config.node.padding / 2)
+ y: (textBBox.y + self.textOffset) - (config.node.padding / 2)
});
});
}
diff --git a/src/app/service-graph/components/fine-grained/fine-grained.component.ts b/src/app/service-graph/components/fine-grained/fine-grained.component.ts
index 7f69387..e41adf8 100644
--- a/src/app/service-graph/components/fine-grained/fine-grained.component.ts
+++ b/src/app/service-graph/components/fine-grained/fine-grained.component.ts
@@ -28,6 +28,8 @@
private linkGroup;
private nodeGroup;
private defs;
+ private textSize = 20;
+ private textOffset = this.textSize / 4;
// debounced functions
private renderGraph;
@@ -164,6 +166,7 @@
private renderServiceNodes(nodes: any) {
const self = this;
+
nodes.append('rect')
.attr({
rx: config.node.radius,
@@ -172,7 +175,8 @@
nodes.append('text')
.attr({
- 'text-anchor': 'middle'
+ 'text-anchor': 'middle',
+ 'transform': `translate(0,${this.textOffset})`
})
.text(n => n.label);
// .text(n => `${n.id} - ${n.label}`);
@@ -187,7 +191,7 @@
width: textBBox.width + config.node.padding,
height: textBBox.height + config.node.padding,
x: textBBox.x - (config.node.padding / 2),
- y: textBBox.y - (config.node.padding / 2)
+ y: (textBBox.y + self.textOffset) - (config.node.padding / 2)
});
});
}
@@ -197,21 +201,26 @@
.attr({
width: 40,
height: 40,
- x: -25,
- y: -25,
+ x: -20,
+ y: -20,
transform: `rotate(45)`
});
+ nodes.append('circle')
+ .attr({
+ r: '4px'
+ });
+
nodes.append('text')
.attr({
- 'text-anchor': 'middle'
+ 'text-anchor': 'middle',
+ 'transform': `translate(0,${this.textOffset})`
})
.text(n => n.label);
}
private renderNetworkNodes(nodes: any) {
const self = this;
- const yTextOff = 8;
nodes.append('use')
.attr({
@@ -228,7 +237,7 @@
nodes.append('text')
.attr({
'text-anchor': 'middle',
- 'transform': 'translate(0,' + yTextOff + ')'
+ 'transform': `translate(0,${this.textOffset})`
})
.text(n => n.label);
@@ -257,7 +266,8 @@
nodes.append('text')
.attr({
- 'text-anchor': 'middle'
+ 'text-anchor': 'middle',
+ 'transform': `translate(0,${this.textOffset})`
})
.text(n => n.label);
@@ -271,7 +281,7 @@
width: textBBox.width + config.node.padding,
height: textBBox.height + config.node.padding,
x: textBBox.x - (config.node.padding / 2),
- y: textBBox.y - (config.node.padding / 2)
+ y: (textBBox.y + self.textOffset) - (config.node.padding / 2)
});
});
}