From 01cfebdf0aa70ab046897a89deb7ce668dbc4df6 Mon Sep 17 00:00:00 2001
From: Leander <leander.gerwing@gmail.com>
Date: Sun, 28 Jul 2024 03:26:23 +0200
Subject: [PATCH] fix: nodes are assigned to the wrong group

---
 src/charts/bubbleChart.ts | 10 +++++-----
 src/main.ts               |  2 +-
 src/styles/index.scss     |  1 +
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/charts/bubbleChart.ts b/src/charts/bubbleChart.ts
index 30b11f0..e599d0a 100644
--- a/src/charts/bubbleChart.ts
+++ b/src/charts/bubbleChart.ts
@@ -102,7 +102,7 @@ export default class BubbleChart extends SearchableChart {
 
         const node = vis.chart
             .selectAll("g")
-            .data(vis.packRoot?.descendants())
+            .data(vis.packRoot?.leaves())
             .join(
                 (enter: any) => enter.append("g"),
                 (update: any) => update
@@ -113,6 +113,7 @@ export default class BubbleChart extends SearchableChart {
             )
 
         node.selectAll('circle')
+            .data((d: any) => [d])
             .transition()
             .duration(1000)
             .attr('fill', (d: any) => vis.getFillForNode(d))
@@ -126,16 +127,13 @@ export default class BubbleChart extends SearchableChart {
 
         const node = vis.chart
             .selectAll("g")
-            .data(vis.packRoot?.descendants())
+            .data(vis.packRoot?.leaves())
             .join("g")
             .attr("transform", (d: any) => `translate(${d.x},${d.y})`)
 
         node
-            .filter((d: any) => !d.children)
             .append('circle')
             .attr('fill', (d: any) => vis.getFillForNode(d))
-            .attr('stroke', 'none')
-            .attr('stroke-width', 2)
             .attr('r', (d: any) => d.r)
             .attr('data-player', (d: any) => d.data.player)
             .on('mouseover', (_: Event, d: any) => {
@@ -181,7 +179,9 @@ export default class BubbleChart extends SearchableChart {
             (
                 (d3.hierarchy(groupedData) as HierarchyNode<any>)
                     .sum((d: any) => this.config.sizeAccessor(d))
+                    .sort((d: any) => this.config.sizeAccessor(d))
             )
+
     }
 
     private getFillForNode(node: HierarchyNode<any>) {
diff --git a/src/main.ts b/src/main.ts
index 3f78f39..de991fb 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -38,7 +38,7 @@ dsv(';', 'data/output.csv').then(data => {
             if (sliderBlocked) return
             zoomSlider.value = event.transform.k.toString()
         },
-        groupAccessor: (d: any) => d['team'],
+        groupAccessor: (d: any) => d['nation'],
     })
 
     bubbleChart.renderVis()
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 1b73854..12e6907 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -71,6 +71,7 @@ h1 {
   border-radius: 8px;
   border: 1px solid #ccc;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  user-select: none;
 }
 
 #app {
-- 
GitLab