Etiquetas sobre el pais

Js/script.js

@@ -114,6 +114,19 @@ function dibujaMapa(seleccionAnno) {
             .style("stroke","black")
             .on("mouseover",function(event,d){
                 const centroid = path.centroid(d);
+                let textX = centroid[0] + (Math.random() * 20 - 10); // Aleatorizar un poco
+                let textY = centroid[1] - 20;
+            
+                // Verificar si el texto se sale hacia la parte superior
+                if (textY < 0) {
+                    textY = 20; // Mover el texto hacia abajo si está fuera por arriba
+                }
+            
+                // Verificar si el texto se sale hacia la parte inferior
+                if (textY > height - 20) {
+                    textY = height - 40; // Mover el texto hacia arriba si está fuera por abajo
+                }
+            
                 d3.select(this)
                     .raise()
                     .style("cursor", "pointer")
@@ -124,8 +137,8 @@ function dibujaMapa(seleccionAnno) {
                         translate(${-centroid[0]}, ${-centroid[1]})`);
                 const textElement=svg.append("text")
                     .attr("id","texto")
-                    .attr("x", centroid[0]+20)
-                    .attr("y", centroid[1] -20)
+                    .attr("x", textX)
+                    .attr("y", textY-5)
                     .style("font-family","Arial")
                     .style("fill","black")
                     .text(`${d.properties.name}: ${d.properties.value ? d.properties.value.toFixed(2) : 'Sin datos'}`)