diff --git a/Js/script.js b/Js/script.js index 799de22c9a4ed91f36ad5fc86d7145a720660b84..30d70ba04ac653cba0ee85b5dc659b2a201eda67 100644 --- a/Js/script.js +++ b/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"); });