remove x axis domain

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)