diff --git a/pages/gb.vue b/pages/gb.vue index af290a18789dd174dc4fed66b3a594304d883c76..b9d896e864c7eeece193c1b41776c412f242ff1b 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 => {