From 43d90b5dd82661cf651e5270c3de3b40bdd0c83e Mon Sep 17 00:00:00 2001
From: "Azadpour, Elmera" <eazadpour@usgs.gov>
Date: Thu, 27 Mar 2025 08:50:26 -0700
Subject: [PATCH] conditional stroke opacity and transition
---
src/components/FishAsFoodCirclePackingViz.vue | 2 ++
1 file changed, 2 insertions(+)
diff --git a/src/components/FishAsFoodCirclePackingViz.vue b/src/components/FishAsFoodCirclePackingViz.vue
index 2b48aa5..f4e165e 100644
--- a/src/components/FishAsFoodCirclePackingViz.vue
+++ b/src/components/FishAsFoodCirclePackingViz.vue
@@ -140,6 +140,7 @@ const activeFamily = ref(defaultFamily); // start with placeholder
.join("text")
.attr("class", "fish-title")
.style("fill-opacity", d => d.parent === root ? 1 : 0)
+ .style("stroke-opacity", d => d.parent === root ? 1 : 0)
.style("display", d => d.parent === root ? "inline" : "none")
.style("font-size", "1.2rem")
.style("stroke", "white") // white outline
@@ -194,6 +195,7 @@ const activeFamily = ref(defaultFamily); // start with placeholder
})
.transition(transition)
.style("fill-opacity", d => d.parent === focus ? 1 : 0)
+ .style("stroke-opacity", d => d.parent === focus ? 1 : 0)
.on("start", function (d) {
if (d.parent === focus) this.style.display = "inline";
})
--
GitLab