Skip to content
Snippets Groups Projects
Commit f614b815 authored by Remi  PLANEL's avatar Remi PLANEL
Browse files

add colors

parent a6b72790
No related branches found
No related tags found
1 merge request!25Draft: Resolve "Add genome browser in wiki instead of svg"
...@@ -4,7 +4,7 @@ import { useDisplay } from 'vuetify' ...@@ -4,7 +4,7 @@ import { useDisplay } from 'vuetify'
import { useElementSize } from '@vueuse/core' import { useElementSize } from '@vueuse/core'
const { width } = useDisplay() const { width } = useDisplay()
const height = ref(200) const height = ref(200)
const color = d3.scaleOrdinal([-1, 1], d3.schemeSet1);
const data = ref([ const data = ref([
{ start: 20, end: 30, strand: 1, name: "toto" }, { start: 20, end: 30, strand: 1, name: "toto" },
{ start: 40, end: 55, strand: -1, name: "tata moins" }, { start: 40, end: 55, strand: -1, name: "tata moins" },
...@@ -26,10 +26,6 @@ const innerWidth = computed(() => { ...@@ -26,10 +26,6 @@ const innerWidth = computed(() => {
return computedWidth.value - marginLeftGb.value - marginRightGb.value 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 minRange = ref(0)
const maxRange = ref(innerWidth.value) const maxRange = ref(innerWidth.value)
...@@ -95,9 +91,7 @@ function drawGene({ width, height, strand }) { ...@@ -95,9 +91,7 @@ function drawGene({ width, height, strand }) {
} }
function positionText(selection) { function positionText(selection) {
selection.each(function (d) { selection.each(function (d) {
const textWidth = this.clientWidth const textWidth = this.clientWidth
if (textWidth >= d.width - 10) { if (textWidth >= d.width - 10) {
d3.select(this) d3.select(this)
...@@ -108,7 +102,6 @@ function positionText(selection) { ...@@ -108,7 +102,6 @@ function positionText(selection) {
.attr("transform", `translate(${x},${d.height / 2})`) .attr("transform", `translate(${x},${d.height / 2})`)
} }
}) })
} }
function drawGenes(genesSelection) { function drawGenes(genesSelection) {
genesSelection genesSelection
...@@ -119,14 +112,13 @@ function drawGenes(genesSelection) { ...@@ -119,14 +112,13 @@ function drawGenes(genesSelection) {
const g = enter.append("g") const g = enter.append("g")
.classed("gene", true); .classed("gene", true);
g.append("path") g.append("path")
.attr("fill", "green")
g.append("text") g.append("text")
g.append("title") g.append("title")
}, },
update => { update => {
update update
.attr("transform", d => `translate(${d.x},${d.y})`) .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("title").text(d => d.name)
update.select("text").attr("transform", d => `translate(${5},${d.height / 2})`).text(d => d.name).call(positionText) update.select("text").attr("transform", d => `translate(${5},${d.height / 2})`).text(d => d.name).call(positionText)
}, },
...@@ -171,13 +163,6 @@ onMounted(() => { ...@@ -171,13 +163,6 @@ onMounted(() => {
}) })
watchEffect(() => { 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() xScale.value = d3.scaleLinear()
.domain(domain.value) // input values... .domain(domain.value) // input values...
.range([minRange.value, innerWidth.value]) .range([minRange.value, innerWidth.value])
...@@ -188,8 +173,7 @@ watchEffect(() => { ...@@ -188,8 +173,7 @@ watchEffect(() => {
</script> </script>
<template> <template>
<div ref="gbContainer"> <div ref="gbContainer">
<v-card title="test"> <v-card title="Text d3 genome browser">
<v-slider v-model="height" class="align-center" :max="1000" :min="100" />
<svg ref="svgRef" :width="computedWidth" :height="height"> <svg ref="svgRef" :width="computedWidth" :height="height">
<g class="x-axis" /> <g class="x-axis" />
</svg> </svg>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment