diff --git a/Js/script.js b/Js/script.js index 37c237c949a622bf0183763aa89be60757cd05cf..4ef0309412efe6430b2ca6cd8f41a10c43617e57 100644 --- a/Js/script.js +++ b/Js/script.js @@ -61,14 +61,15 @@ function dibujaMapa(seleccionAnno) { let max=Math.max(...datosAnno); d3.json("./JsonPaises/world-geo.json").then(function (geojson) { - // Configuración del mapa + + // Eliminamos mapas anteriores + d3.selectAll("#Map").remove(); var DivMapa = document.getElementById("map"); var width = DivMapa.clientWidth; var height = DivMapa.clientHeight; - // Eliminamos mapas anteriores - d3.selectAll("#Map").remove(); + // Creamos el svg var svg = d3.select("#map") .append("svg") @@ -221,19 +222,41 @@ function dibujaGrafico(country,paises){ index=i; } } - datosPais=paises[index]; - const datos = nombresDeVariables.map((year, i) => ({ - Year: parseInt(year), - Valor: typeof datosPais[i + 1] === "number" ? datosPais[i + 1] : null - })).filter(d => d.Valor !== null); // Filtramos valores nulos o no numéricos + + + // Se elimina el gráfico existente + d3.selectAll("#GraficoLineasSvg").remove(); + d3.selectAll("#GraficoNoEncontrado").remove(); const GraficoLineas = document.getElementById("grafico"); const margin = { top: 20, right: 20, bottom: 50, left: 50 }; const width = GraficoLineas.clientWidth - margin.left - margin.right; const height = GraficoLineas.clientHeight - margin.top - margin.bottom; + if (index === undefined) { + // Si no se encuentra el paÃs, mostrar un mensaje + const noEncontrado = d3.select("#grafico") + .append("svg") + .attr("id", "GraficoNoEncontrado") + .attr("width", GraficoLineas.clientWidth) + .attr("height", GraficoLineas.clientHeight); + + noEncontrado.append("text") + .attr("x", GraficoLineas.clientWidth / 2) // Centrado horizontalmente + .attr("y", margin.top + 30) // Posición por debajo del tÃtulo + .attr("text-anchor", "middle") // Centrado de texto + .style("font-family", "Arial") + .style("font-size", "16px") + .style("font-weight", "bold") + .style("fill", "black") + .text("No se encontraron datos para el paÃs seleccionado."); + return; // Salir de la función si no se encuentra el paÃs + } + datosPais=paises[index]; + const datos = nombresDeVariables.map((year, i) => ({ + Year: parseInt(year), + Valor: typeof datosPais[i + 1] === "number" ? datosPais[i + 1] : null + })).filter(d => d.Valor !== null); // Filtramos valores nulos o no numéricos - // Se elimina el gráfico existente - d3.selectAll("#GraficoLineasSvg").remove(); // Creamos el SVG para el gráfico const svg = d3.select("#grafico")