From 831cc1df2f64a4feecc733a6318100d6862cebea Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Mon, 29 Apr 2024 19:36:39 +0200
Subject: [PATCH] add some transition
---
components/OperonStructure.vue | 25 +++++++++++++++++--------
1 file changed, 17 insertions(+), 8 deletions(-)
diff --git a/components/OperonStructure.vue b/components/OperonStructure.vue
index 1cf816cf..f696a862 100644
--- a/components/OperonStructure.vue
+++ b/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())
--
GitLab