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)
});
});
}