frist reactive version

client/src/components/circle/CircleDiagram.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import * as d3 from "d3";
-import {computed, onMounted, reactive} from "vue";
+import {computed, onMounted, reactive, ref} from "vue";
 import * as _ from 'underscore'
 import {useCircleStore} from "@/stores/circle";
 
-
 const props = defineProps<{
   circleStore: {},
   width: {
@@ -63,13 +62,8 @@ const pieData = computed(() => {
   return {}
 })
 
-onMounted(async () => {
-     const width = 450, //props.width,
-      height = 450, //props.height,
-      radius: number = Math.min(width, height) / 2.4,
-      arrowStrokeWidth = 2
 
-    const blue900 = '#00224D',
+const blue900 = '#00224D',
       blue700 = '#1A5197',
       gray100 = '#EDF2F6',
       gray300 = '#E0E5EC',
@@ -78,13 +72,24 @@ onMounted(async () => {
       sky500 = '#41B5FA'
 
 
+const svg = computed(() => {
+  
+})
+
+const render = computed( () => {
+  const width = 450, //props.width,
+      height = 450, //props.height,
+      radius: number = Math.min(width, height) / 2.4,
+      arrowStrokeWidth = 2
+
+
+
+
     const svg = d3.select('.circle-visualization')
       .attr('width', width)
       .attr('height', height)
 
-    const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
-
-    // Append markter as definition to the svg
+      // Append markter as definition to the svg
     svg.append("svg:defs").append("svg:marker")
       .attr("id", "triangle")
       .attr("refX", 11)
@@ -99,6 +104,10 @@ onMounted(async () => {
       .attr('stroke-width', arrowStrokeWidth)
       .attr('stroke', gray500)
 
+    const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
+
+
+
 
     // Generate the pie diagram wede
     const wedgeGenerator = d3
@@ -195,8 +204,7 @@ onMounted(async () => {
     const arrows = g
       .selectAll('.arrow')
       .data(pieData.value)
-      .enter()
-      .append('g')
+      .join('g')
       .attr('class', 'arrow')
       .attr('marker-end', 'url(#triangle)')
 
@@ -212,8 +220,11 @@ onMounted(async () => {
 
     //Draw arrow paths
     arrows.append('path').attr('fill', gray500).attr('d', arrow)
+  return svg
 
+})
 
+onMounted(async () => {
   }
 );
 
@@ -228,6 +239,9 @@ function viewBox() {
 
 <template>
   <div class="svg-container h-full content-center">
+    <pre hidden>{{pieData}}</pre>
+    <pre hidden> {{render}}</pre>
+    <pre> </pre>
     <svg class="circle-visualization h-full" :viewBox="viewBox">
     </svg>
   </div>