From 2e10aa5fb8ae60c2480ce39c039a32a3300dbef0 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Fri, 26 Apr 2024 18:12:12 +0200
Subject: [PATCH] axis top plus little padding
---
components/OperonStructure.vue | 13 ++++++-------
1 file changed, 6 insertions(+), 7 deletions(-)
diff --git a/components/OperonStructure.vue b/components/OperonStructure.vue
index da343553..e2d4290a 100644
--- a/components/OperonStructure.vue
+++ b/components/OperonStructure.vue
@@ -17,9 +17,9 @@ const props = withDefaults(defineProps<Props>(), {
const height = ref<number>(200)
const svgRef = ref<SVGElement | null>(null)
const margin = ref<PlotMargin>({
- marginTop: 10,
+ marginTop: 50,
marginRight: 7,
- marginBottom: 40,
+ marginBottom: 1,
marginLeft: 7,
})
@@ -35,7 +35,7 @@ const domain = computed(() => {
return genes?.map(d => { return d.gene })
})
-const innerPadding = ref<number>(0.5)
+const innerPadding = ref<number>(5)
const totalGeneLength = computed(() => {
const genes = toValue(computedGenes)
@@ -47,7 +47,6 @@ const totalGeneLength = computed(() => {
const domainGenes = computed(() => {
return [0, totalGeneLength.value]
-
})
const xScale = computed(() => {
return d3.scaleBand()
@@ -144,11 +143,11 @@ function draw() {
if (svgRef.value !== null) {
const svg = d3.select<SVGElement, undefined>(svgRef.value);
- const { marginLeft } = toValue(margin)
- const xAxis = d3.axisBottom(xScale.value)
+ const { marginLeft, marginTop } = toValue(margin)
+ const xAxis = d3.axisTop(xScale.value)
const gx = createOrSelect(svg, 'g', 'x-axis')
gx
- .attr("transform", `translate(${marginLeft},${toValue(height) + 5})`)
+ .attr("transform", `translate(${marginLeft},${marginTop})`)
.call(xAxis)
gx.call(g => g.select(".domain")
--
GitLab