add some transition

components/OperonStructure.vue

@@ -20,9 +20,9 @@ const { genes: genesProps } = toRefs(props)
 const height = ref<number>(200)
 const svgRef = ref<SVGElement | null>(null)
 const margin = ref<PlotMargin>({
-    marginTop: 50,
+    marginTop: 5,
     marginRight: 7,
-    marginBottom: 1,
+    marginBottom: 50,
     marginLeft: 7,
 })
 
@@ -40,7 +40,7 @@ const domain = computed(() => {
     return genes?.map(d => { return d.gene })
 })
 
-const innerPadding = ref<number>(5)
+const innerPadding = ref<number>(8)
 
 const totalGeneLength = computed(() => {
     const genes = toValue(computedGenes)
@@ -200,16 +200,16 @@ function draw() {
     if (svgRef.value !== null) {
         const svg = d3.select<SVGElement, undefined>(svgRef.value);
         const { marginLeft, marginTop } = toValue(margin)
-        const xAxis = d3.axisTop(xScale.value)
+        const xAxis = d3.axisBottom(xScaleGenes.value)
         const gx = createOrSelect(svg, 'g', 'x-axis')
         gx
-            .attr("transform", `translate(${marginLeft},${marginTop})`)
+            .attr("transform", `translate(${marginLeft},${toValue(height) + marginTop})`)
             .call(xAxis)
 
         gx.call(g => g.select(".domain")
             .remove())
             .selectAll("text")
-            .attr("transform", 'rotate(-20)')
+            .attr("transform", 'rotate(20)')
             .attr("text-anchor", "start")
 
         let gOperon = createOrSelect(svg, "g", "operon")
@@ -236,15 +236,19 @@ function drawLinks(operonGroup: d3.Selection<SVGElement, any, SVGElement, any>)
     const stroke = "#555" // stroke for links
     const strokeWidth = 1.5 // stroke width for links
     const strokeOpacity = 0.4 // stroke opacity for links
-    operonGroup
+    const updateSelection = operonGroup
         .selectAll("path.link")
         .data(linksGenesStruct.value)
         .join("path")
         .classed("link", true)
         .attr("fill", "none")
         .attr("stroke", "currentColor")
+
+    updateSelection
+        .transition()
         .attr("stroke-opacity", d => d.highlight ? 0.6 : strokeOpacity)
         .attr("stroke-width", d => d.highlight ? strokeWidth + 2 : strokeWidth)
+
         .attr("d", d3.link(d3.curveBumpY))
 }
 
@@ -355,12 +359,17 @@ function drawGenes(operonGroup: d3.Selection<SVGElement, any, SVGElement, any>)
 
 
 
-    genesSelection.select("g.gene-grp")
+    const genePathSelection = genesSelection
+        .select("g.gene-grp")
         .select("path.gene")
         // .attr("stroke", d => d?.highlight ? d3.color(color(d.system))?.darker() : null)
         .attr("stroke-width", d => d?.highlight ? 4 : 0)
         .attr("transform", d => `translate(0, ${d.y})`)
+    genePathSelection
+        .transition()
         .attr("fill", d => d?.highlight ? d3.color(color(d.system))?.brighter() : color(d.system))
+
+    genePathSelection
         .attr("d", d => drawGene(d).toString())