From 9b5954ff9e819a1924166a2368d00a307d56a530 Mon Sep 17 00:00:00 2001
From: frajuar <franciscojavier.juarez@estudiantes.uva.es>
Date: Mon, 2 Dec 2024 13:28:50 +0100
Subject: [PATCH] distancia del texto sobre el pais
---
Js/script.js | 17 ++++++++++-------
1 file changed, 10 insertions(+), 7 deletions(-)
diff --git a/Js/script.js b/Js/script.js
index 799de22..30d70ba 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");
});
--
GitLab