diff --git a/pages/gb.vue b/pages/gb.vue index 30f1dcb3413f88fe336b59e360d0abc361c33dd1..a656cc24b19a70888c533d1ac288ba5943d07cb5 100644 --- a/pages/gb.vue +++ b/pages/gb.vue @@ -4,7 +4,7 @@ import { useDisplay } from 'vuetify' import { useElementSize } from '@vueuse/core' const { width } = useDisplay() const height = ref(200) - +const color = d3.scaleOrdinal([-1, 1], d3.schemeSet1); const data = ref([ { start: 20, end: 30, strand: 1, name: "toto" }, { start: 40, end: 55, strand: -1, name: "tata moins" }, @@ -26,10 +26,6 @@ const innerWidth = computed(() => { return computedWidth.value - marginLeftGb.value - marginRightGb.value }) -// const computedWidth = computed(() => { -// return gbContainer.value?.clientWidth ?? 400 -// }) -// const computedWidth = ref(gbContainer.value.clientWidth) const minRange = ref(0) const maxRange = ref(innerWidth.value) @@ -95,9 +91,7 @@ function drawGene({ width, height, strand }) { } function positionText(selection) { - selection.each(function (d) { - const textWidth = this.clientWidth if (textWidth >= d.width - 10) { d3.select(this) @@ -108,7 +102,6 @@ function positionText(selection) { .attr("transform", `translate(${x},${d.height / 2})`) } }) - } function drawGenes(genesSelection) { genesSelection @@ -119,14 +112,13 @@ function drawGenes(genesSelection) { const g = enter.append("g") .classed("gene", true); g.append("path") - .attr("fill", "green") g.append("text") g.append("title") }, update => { update .attr("transform", d => `translate(${d.x},${d.y})`) - update.select("path").attr("d", d => drawGene(d).toString()) + update.select("path").attr("d", d => drawGene(d).toString()).attr("fill", d => color(d.strand)) update.select("title").text(d => d.name) update.select("text").attr("transform", d => `translate(${5},${d.height / 2})`).text(d => d.name).call(positionText) }, @@ -171,13 +163,6 @@ onMounted(() => { }) watchEffect(() => { - // console.log(size.value) - // console.log(gbContainer.value?.clientWidth) - // console.log(width.value) - // const c = gbContainer.value - // console.log(c) - // console.log(c?.clientWidth) - console.log(innerWidth.value) xScale.value = d3.scaleLinear() .domain(domain.value) // input values... .range([minRange.value, innerWidth.value]) @@ -188,8 +173,7 @@ watchEffect(() => { </script> <template> <div ref="gbContainer"> - <v-card title="test"> - <v-slider v-model="height" class="align-center" :max="1000" :min="100" /> + <v-card title="Text d3 genome browser"> <svg ref="svgRef" :width="computedWidth" :height="height"> <g class="x-axis" /> </svg>