axis top plus little padding

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")