tree node size corresponding to value

modules/tree.js

@@ -51,6 +51,22 @@ function updateTree(filterKey) {
     console.log(treeData)
     const root = d3.hierarchy(treeData);
 
+    // Funktion, um Skalierungen für finale Knoten pro Ebene zu definieren
+    function createSizeScale(nodes) {
+        const values = nodes
+            .filter(d => !d.children) // Nur Endknoten
+            .map(d => {
+                const match = d.data.name.match(/: (\d+)$/); // Extrahiere Wert aus Name
+                return match ? +match[1] : 0;
+            });
+        return d3.scaleSqrt()
+            .domain([0, d3.max(values)]) // Min/Max der Werte
+            .range([5, 40]); // Knotenradius
+    }
+
+    // Erstelle die Skalierung basierend auf der aktuellen Ebene
+    const sizeScale = createSizeScale(root.descendants());
+
     function removeChildren(child) {
         if (child.children) {
             child._children = child.children;
@@ -98,7 +114,13 @@ function updateTree(filterKey) {
 
     node.append("circle")
         .style("cursor", hierarchyStack.length < 3 ? "pointer" : "")
-        .attr("r", 5)
+        .attr("r", d => {
+            if (!d.children) { // Nur für finale Knoten die Größe anpassen
+                const match = d.data.name.match(/: (\d+)$/);
+                return match ? sizeScale(+match[1]) : 5; // Skalierung anwenden
+            }
+            return 5; // Standardgröße für interne Knoten
+        })
         .on("click", (event, d) => {
             if (hierarchyStack.length < 3 && d.depth === 1 || d.depth === 2) { // Go deeper for states or countries
                 d3.select(".tooltip").remove();
@@ -125,7 +147,10 @@ function updateTree(filterKey) {
         .attr("x", d => {
             if (d.data.name==="Schengen States") return 46
             if (d.children) return -10
-            if (!d.children) return 10
+            if (!d.children) { // Nur für finale Knoten die Größe anpassen
+                const match = d.data.name.match(/: (\d+)$/);
+                return match ? sizeScale(+match[1])+10 : 10; // Skalierung anwenden
+            }
         })
         .attr("y", d => {
             if (d.data.name==="Schengen States") return -12