From dd87e5243af210b4b71e8d4c419bb66a5abee388 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Fri, 26 Apr 2024 13:41:54 +0200
Subject: [PATCH] remove x axis domain
---
components/OperonStructure.vue | 41 ++++++++++++++++------------------
1 file changed, 19 insertions(+), 22 deletions(-)
diff --git a/components/OperonStructure.vue b/components/OperonStructure.vue
index adbd7fe3..2fa2077f 100644
--- a/components/OperonStructure.vue
+++ b/components/OperonStructure.vue
@@ -14,12 +14,12 @@ const structureBasket = useStructuresBasket()
const props = withDefaults(defineProps<Props>(), {
genes: null
});
-const height = ref<number>(150)
+const height = ref<number>(120)
const svgRef = ref<SVGElement | null>(null)
const margin = ref<PlotMargin>({
marginTop: 10,
marginRight: 7,
- marginBottom: 30,
+ marginBottom: 40,
marginLeft: 7,
})
@@ -124,19 +124,14 @@ function draw() {
gx
.attr("transform", `translate(${marginLeft},${toValue(height) + 5})`)
.call(xAxis)
- .selectAll("text")
- .attr("transform", 'rotate(20)')
- .attr("text-anchor", "start")
- const gxTitle = createOrSelect(gx, "text", "x-axis-title")
- gxTitle
- .attr("text-anchor", "end")
- .attr("fill", "currentColor")
+ gx.call(g => g.select(".domain")
+ .remove())
- gxTitle
- .attr("x", toValue(computedPlotWidth))
- .attr("y", - 10)
+ .selectAll("text")
+ .attr("transform", 'rotate(20)')
+ .attr("text-anchor", "start")
let gGenes = createOrSelect(svg, "g", "genes")
gGenes
@@ -160,18 +155,20 @@ function drawGenes(genesGroup: d3.Selection<SVGElement, any, SVGElement, any>) {
gGene.append("path")
.classed("gene", true)
- gGene.append("image")
+ gGene.append("g").classed("img", true).append("image")
.on("mouseover", function (event) {
- d3.select(event.srcElement.previousSibling)
- .attr("stroke-width", 4)
- .attr("stroke", "darkred")
- d3.select(event.srcElement).attr("cursor", "pointer")
+ const target = d3.select(event.srcElement.parentElement)
+ target
+ // .attr("stroke-width", 4)
+ // .attr("stroke", "darkred")
+ .attr("cursor", "pointer")
})
.on("mouseout", function (event) {
- d3.select(event.srcElement.previousSibling)
- .attr("stroke-width", 0)
- .attr("stroke", null)
- d3.select(event.srcElement).attr("cursor", "unset")
+ const target = d3.select(event.srcElement.parentElement)
+ target
+ // .attr("stroke-width", 0)
+ // .attr("stroke", null)
+ .attr("cursor", "unset")
})
gGene.append("text")
// .attr("fill", "white")
@@ -185,7 +182,7 @@ function drawGenes(genesGroup: d3.Selection<SVGElement, any, SVGElement, any>) {
exit => exit.remove()
)
genesSelection.attr("transform", d => `translate(${d.x}, 0)`)
- genesSelection.select("image")
+ genesSelection.select("g.img").select("image")
.attr("transform", d => `translate(0, ${toValue(yScale)("img")})`)
.attr("href", d => d?.structImg ?? null)
.attr("width", d => d.width)
--
GitLab