From 96de26b2e4783a762243675bd3b8d11987cbd171 Mon Sep 17 00:00:00 2001
From: rodpena <rodrigo.pena22@estudiantes.uva.es>
Date: Tue, 10 Dec 2024 20:11:18 +0100
Subject: [PATCH] selecionar solo dos jugadores a la vez
---
script.js | 96 +++++++++++++++++++++++++++++++++----------------------
1 file changed, 58 insertions(+), 38 deletions(-)
diff --git a/script.js b/script.js
index 3341fda..9eca9b5 100644
--- a/script.js
+++ b/script.js
@@ -1,3 +1,8 @@
+// Array global para almacenar los jugadores seleccionados
+let jugadoresSeleccionados = [];
+
+let maximosGlobales = {};
+
// Función para restaurar el div #resto-pantalla a su forma original
function restaurarFormaOriginal() {
d3.select("#resto-pantalla")
@@ -93,7 +98,6 @@ function calcularMaximos(datos) {
};
}
-// Crear gráfico de radar
function crearGraficoRadar(containerSelector, jugadoresSeleccionados = [], maximos = null) {
const container = d3.select(containerSelector);
@@ -120,6 +124,7 @@ function crearGraficoRadar(containerSelector, jugadoresSeleccionados = [], maxim
"Minutos/Partido",
];
+ // Usa los máximos globales si no se pasan como argumento
const rScale = d3.scaleLinear().range([0, radius]).domain([0, 100]);
const svg = container
@@ -129,7 +134,7 @@ function crearGraficoRadar(containerSelector, jugadoresSeleccionados = [], maxim
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
- // Dibujar niveles
+ // Dibujar niveles y etiquetas aquÃ...
for (let level = 1; level <= levels; level++) {
const levelRadius = (level / levels) * radius;
@@ -186,7 +191,7 @@ function crearGraficoRadar(containerSelector, jugadoresSeleccionados = [], maxim
jugadoresSeleccionados.forEach((jugador) => {
const playerData = labels.map((label) => {
const value = +jugador[label];
- const maximo = maximos[label];
+ const maximo = maximos[label]; // Usar los máximos globales
return (value / maximo) * 100; // Escalar al porcentaje del máximo
});
@@ -211,7 +216,6 @@ function crearGraficoRadar(containerSelector, jugadoresSeleccionados = [], maxim
});
}
-// Modificar cargarJugadoresDesdeArchivo para calcular máximos y añadir evento al contenedor
function cargarJugadoresDesdeArchivo() {
const csvPath = "assets/estadisticasRendimientoJugadores.csv";
const ladoIzquierdo = d3.select("#lado-izquierdo");
@@ -224,32 +228,21 @@ function cargarJugadoresDesdeArchivo() {
.style("justify-content", "space-between");
d3.csv(csvPath).then((data) => {
- const maximos = calcularMaximos(data);
+ // Calcula los máximos al cargar los datos
+ maximosGlobales = calcularMaximos(data);
+
const colores = [
- "#FF5733", // Rojo anaranjado brillante
- "#33FF57", // Verde brillante
- "#3357FF", // Azul brillante
- "#F333FF", // Magenta
- "#FFD733", // Amarillo brillante
- "#33FFF5", // Cyan
- "#FF33A1", // Rosa fuerte
- "#A133FF", // Morado brillante
- "#FF6F33", // Naranja fuerte
- "#33FF94", // Verde agua
- "#FF3333", // Rojo vivo
- "#33A1FF", // Azul cielo
- "#FF33D7", // Rosa intenso
- "#6FFF33", // Verde limón
- "#FF9333" // Naranja pastel
+ "#FF5733", "#33FF57", "#3357FF", "#F333FF", "#FFD733", "#33FFF5",
+ "#FF33A1", "#A133FF", "#FF6F33", "#33FF94", "#FF3333", "#33A1FF",
+ "#FF33D7", "#6FFF33", "#FF9333"
];
-
-
- // Asignar un color único a cada jugador
+ // Asigna un color único a cada jugador
data.forEach((d, i) => {
d.color = colores[i % colores.length];
});
+ // Crear la lista de jugadores
ladoIzquierdo
.selectAll(".jugador-rect")
.data(data)
@@ -259,23 +252,38 @@ function cargarJugadoresDesdeArchivo() {
.style("flex", "1")
.style("margin", "2px 0")
.style("padding", "10px")
- .style("background-color", " #B3E5FC")
+ .style("background-color", "#B3E5FC")
.style("color", "#000")
.style("display", "flex")
.style("align-items", "center")
.style("justify-content", "center")
- .style("border", "2px solid transparent") // Inicialmente sin color en el borde
+ .style("border", "2px solid transparent")
.on("click", function (event, d) {
- // Alternar selección del jugador
const checkbox = d3.select(this).select(".jugador-checkbox");
const isChecked = checkbox.property("checked");
- checkbox.property("checked", !isChecked);
-
- // Cambiar borde según selección
- d3.select(this)
- .style("border", !isChecked ? `3px solid ${d.color}` : "2px solid transparent");
- gestionarCheckboxes(data, maximos);
+ if (isChecked) {
+ checkbox.property("checked", false);
+ d3.select(this).style("border", "2px solid transparent");
+ jugadoresSeleccionados = jugadoresSeleccionados.filter((jugador) => jugador !== d);
+ } else {
+ if (jugadoresSeleccionados.length === 2) {
+ const jugadorAntiguo = jugadoresSeleccionados.shift();
+ d3.selectAll(".jugador-checkbox")
+ .filter((data) => data === jugadorAntiguo)
+ .property("checked", false);
+ d3.selectAll(".jugador-rect")
+ .filter((data) => data === jugadorAntiguo)
+ .style("border", "2px solid transparent");
+ }
+
+ checkbox.property("checked", true);
+ d3.select(this).style("border", `3px solid ${d.color}`);
+ jugadoresSeleccionados.push(d);
+ }
+
+ // Usa los máximos globales al actualizar el gráfico
+ crearGraficoRadar("#lado-derecho", jugadoresSeleccionados, maximosGlobales);
})
.each(function (d) {
d3.select(this)
@@ -283,42 +291,54 @@ function cargarJugadoresDesdeArchivo() {
.attr("class", "jugador-numero")
.style("font-weight", "bold")
.style("font-size", "1.2em")
- .style("flex", "0 0 auto") // Mantiene el número fijo en la izquierda
+ .style("flex", "0 0 auto")
.style("text-align", "left")
.text(`${d.Nº}º`);
- // Mostrar el nombre del jugador
d3.select(this)
.append("div")
.attr("class", "jugador-nombre")
.style("font-size", "1.2em")
.style("text-align", "center")
- .style("flex", "1") // Permite que el nombre ocupe el resto del espacio
+ .style("flex", "1")
.text(d.Nombre);
-
d3.select(this)
.append("input")
.attr("type", "checkbox")
.attr("class", "jugador-checkbox")
- .style("display", "none"); // Ocultar el checkbox visualmente
+ .style("display", "none");
});
});
}
-// Gestionar los checkboxes
function gestionarCheckboxes(data, maximos) {
const jugadoresSeleccionados = [];
+ // Recopila los jugadores seleccionados actualmente
d3.selectAll(".jugador-checkbox").each(function (d, i) {
if (d3.select(this).property("checked")) {
jugadoresSeleccionados.push(data[i]);
}
});
+ // Si hay más de dos seleccionados, deselecciona el jugador más antiguo
+ if (jugadoresSeleccionados.length > 2) {
+ const jugadorAntiguo = jugadoresSeleccionados.shift(); // Elimina el más antiguo
+ d3.selectAll(".jugador-checkbox")
+ .filter((d) => d === jugadorAntiguo)
+ .property("checked", false); // Desmarca el checkbox
+ d3.selectAll(".jugador-rect")
+ .filter((d) => d === jugadorAntiguo)
+ .style("border", "2px solid transparent"); // Quita el borde
+ }
+
+ // Actualiza el gráfico de radar
crearGraficoRadar("#lado-derecho", jugadoresSeleccionados, maximos);
}
+
+
function cargarDatosTemporada() {
const csvPath = "assets/estadisticasDatosTemporada.csv";
--
GitLab