add small coef to align text in genes

pages/gb.vue

@@ -3,7 +3,7 @@ import * as d3 from "d3";
 import { useDisplay } from 'vuetify'
 import { useElementSize } from '@vueuse/core'
 const { width } = useDisplay()
-const height = ref(200)
+const height = ref(150)
 const color = d3.scaleOrdinal([-1, 1], d3.schemeSet1);
 const data = ref([
     { start: 20, end: 30, strand: 1, name: "toto" },
@@ -21,10 +21,14 @@ const computedWidth = computed(() => {
 
 const marginLeftGb = ref(10)
 const marginRightGb = ref(10)
+const marginBottomGb = ref(10)
 
 const innerWidth = computed(() => {
     return computedWidth.value - marginLeftGb.value - marginRightGb.value
 })
+const innerHeigth = computed(() => {
+    return height.value - marginBottomGb.value
+})
 
 const minRange = ref(0)
 const maxRange = ref(innerWidth.value)
@@ -40,7 +44,7 @@ const xScale = ref(d3.scaleLinear()
 );
 const yScale = ref(d3.scaleLinear()
     .domain([-1, 1])
-    .range([0, height.value]));
+    .range([0, innerHeigth.value]));
 
 
 
@@ -55,7 +59,7 @@ const computedData = computed(() => {
         const width = xScale.value(gene.end) - xScale.value(gene.start)
         const height = yScale.value(-0.5)
         const x = xScale.value(gene.start) + marginLeftGb.value
-        const y = gene.strand < 0 ? yScale.value(0.25) : yScale.value(-0.75)
+        const y = gene.strand < 0 ? yScale.value(0.25) - marginBottomGb.value : yScale.value(-0.75) - marginBottomGb.value
 
         return {
             ...gene,
@@ -97,7 +101,10 @@ function positionText(selection) {
             d3.select(this)
                 .text('')
         } else {
-            const x = d.width / 2 - textWidth / 2
+            const halfW = d.width / 2
+            const halfTw = textWidth / 2
+            const k = d.height / 8
+            const x = d.strand > 0 ? halfW - halfTw - k : halfW - halfTw + k
             d3.select(this)
                 .attr("transform", `translate(${x},${d.height / 2})`)
         }
@@ -114,6 +121,7 @@ function drawGenes(genesSelection) {
                 g.append("path")
                 g.append("text")
                     .attr("fill", "white")
+                    .attr("dominant-baseline", "middle")
                 g.append("title")
             },
             update => {