distancia del texto sobre el pais

Js/script.js

@@ -114,6 +114,9 @@ function dibujaMapa(seleccionAnno) {
             .style("stroke","black")
             .on("mouseover",function(event,d){
                 const centroid = path.centroid(d);
+                const value = d.properties.value.toFixed(2).toString();
+                const countryName = d.properties.name;
+                console.log(value);
                 d3.select(this)
                     .raise()
                     .style("stroke-width", 0.75)
@@ -121,12 +124,10 @@ function dibujaMapa(seleccionAnno) {
                         translate(${centroid[0]}, ${centroid[1]}) 
                         scale(1.2) 
                         translate(${-centroid[0]}, ${-centroid[1]})`);
-
-    
                 const textElement=svg.append("text")
                     .attr("id","texto")
-                    .attr("x", centroid[0])
-                    .attr("y", centroid[1] - 10)
+                    .attr("x", centroid[0]+20)
+                    .attr("y", centroid[1] -20)
                     .style("font-family","Arial")
                     .style("fill","black")
                     .text(`${d.properties.name}: ${d.properties.value ? d.properties.value.toFixed(2) : 'Sin datos'}`)
@@ -134,7 +135,6 @@ function dibujaMapa(seleccionAnno) {
                 const textBBox = textElement.node().getBBox();
 
                 svg.append("rect")
-                .attr("class", "background-rect")
                 .attr("id","rectanguloTexto")
                 .attr("x", textBBox.x -5)
                 .attr("y", textBBox.y -2)
@@ -143,10 +143,10 @@ function dibujaMapa(seleccionAnno) {
                 .attr("rx", 5) 
                 .attr("ry", 5)
                 .style("fill", "white")
-                .style("opacity", 0.2);
+                .style("opacity", 0.4);
 
                 textElement.raise();
-            
+               
             })
             .on("mouseout",function(){
                 d3.select(this)
@@ -154,6 +154,7 @@ function dibujaMapa(seleccionAnno) {
                     .attr("transform", null);
                 d3.selectAll("#texto").remove();
                 d3.selectAll("#rectanguloTexto").remove();
+
             })
             .on("click",function(event,d){
                 dibujaGrafico(d.properties.name,paises);
@@ -177,6 +178,7 @@ function dibujaMapa(seleccionAnno) {
             .attr("class", "axis") 
             .call(legendAxis)
             .selectAll("text") 
+            .style("font-family","Arial")
             .attr("transform", "translate(30, 0)") // Desplazar los valores de la leyenda a la derecha 
             .style("text-anchor", "start"); // Alinear los valores de la leyenda a la derecha; 
             
@@ -195,6 +197,7 @@ function dibujaMapa(seleccionAnno) {
             .attr("y", -10 + legendScale(Math.exp(i + 0.1)) - legendScale(Math.exp(i)))
             .style("font-size", "12px")
             .style("font-weight", "bold")
+            .style("font-family","Arial")
             .text("PIB");
     });