From a22772c2a169f33ea6de480724a619775a22b35f Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Mon, 23 Oct 2023 15:38:19 +0200
Subject: [PATCH] add small coef to align text in genes
---
pages/gb.vue | 16 ++++++++++++----
1 file changed, 12 insertions(+), 4 deletions(-)
diff --git a/pages/gb.vue b/pages/gb.vue
index af290a18..b9d896e8 100644
--- a/pages/gb.vue
+++ b/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 => {
--
GitLab