Retain positioning with updates

src/components/BeeswarmChart.vue

@@ -52,7 +52,7 @@
   </template>
   
   <script setup>
-  import { onMounted, ref } from "vue";
+  import { onMounted, ref, watch } from "vue";
   import * as d3 from 'd3';
   
   // Global variables 
@@ -168,7 +168,7 @@
   
     // Set forces
     const forceY = d3.forceY(d => yScale(d.level_agreement)).strength(1);
-    const forceX = d3.forceX(width / 1.5).strength(0.1);
+    const forceX = d3.forceX(width / 2).strength(0.1);
     const forceCollide = d3.forceCollide(d => radiusScale(d.evidence_val) + 2);
     const forceManyBody = d3.forceManyBody().strength(-15);
   
@@ -232,8 +232,6 @@
     // Update existing bubbles
     bubbles
       .attr('r', d => radiusScale(d.evidence_val))
-      .attr('cx', d => d.x)
-      .attr('cy', d => d.y)
       .style('fill', d => dimensionColors[d.dimension.replace(' ', '')]);
   
     // Add new bubbles
@@ -241,13 +239,14 @@
       .append('circle')
       .attr('class', 'bubble')
       .attr('r', d => radiusScale(d.evidence_val))
+      .style('fill', d => dimensionColors[d.dimension.replace(' ', '')])
+      .merge(bubbles)  // Merge to apply forces to new and existing bubbles
       .attr('cx', d => d.x)  // Use existing x position
-      .attr('cy', d => yScale(d.level_agreement))
-      .style('fill', d => dimensionColors[d.dimension.replace(' ', '')]);
+      .attr('cy', d => d.y);
   
     // Restart simulation with new data
     simulation.nodes(dataPoints)
-      .force('x', d3.forceX(d => d.x).strength(0.1)) // Use existing x position
+      .force('x', forceX)
       .force('y', forceY)
       .force('collide', forceCollide)
       .force('charge', forceManyBody)