From 529c2bdf74bc0a8531dd36329da620a22a7da6cf Mon Sep 17 00:00:00 2001
From: rodpena <rodrigo.pena22@estudiantes.uva.es>
Date: Sat, 30 Nov 2024 17:16:55 +0100
Subject: [PATCH] commit grafico radar2

---
 script.js | 58 ++++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 42 insertions(+), 16 deletions(-)

diff --git a/script.js b/script.js
index ad1c1d5..50651cb 100644
--- a/script.js
+++ b/script.js
@@ -88,28 +88,42 @@ function rendimientoJugadores() {
     crearGraficoRadar("#lado-derecho");
 }
 
-// Función para crear el gráfico de radar con líneas intermedias y exteriores
+// Función para crear el gráfico de radar con etiquetas ajustadas
 function crearGraficoRadar(containerSelector) {
     const container = d3.select(containerSelector);
 
-    // Configuración del SVG
-    const width = 600; // Tamaño del gráfico
-    const height = 600;
+    // Obtener las dimensiones del contenedor dinámicamente
+    const boundingRect = container.node().getBoundingClientRect();
+    const width = boundingRect.width; // Ancho del contenedor
+    const height = boundingRect.height; // Alto del contenedor
+    const margin = 50; // Margen para evitar etiquetas fuera del área visible
 
     // Configuración del radar
     const metrics = 8; // Número de vértices
     const levels = 5; // Número de niveles (anillos intermedios)
-    const radius = Math.min(width, height) / 2; // Radio del radar exterior
+    const radius = (Math.min(width, height) - margin * 2) / 2 * 0.70; // Reducir tamaño del gráfico al 85%
     const angleSlice = (2 * Math.PI) / metrics;
 
+    // Etiquetas para los vértices
+    const labels = [
+        "Puntos/Partido",
+        "% Tiro de 2",
+        "% Tiro de 3",
+        "% Tiro Libre",
+        "Rebotes/Partido",
+        "Recuperaciones/Partido",
+        "Asistencias/Partido",
+        "Minutos/Partido",
+    ];
+
     // Escala para los niveles (líneas intermedias)
     const rScale = d3.scaleLinear().range([0, radius]).domain([0, 100]);
 
     // Crear el SVG dentro del contenedor
     const svg = container
         .append("svg")
-        .attr("width", width)
-        .attr("height", height)
+        .attr("width", "100%") // Ajustar el ancho al contenedor
+        .attr("height", "100%") // Ajustar el alto al contenedor
         .append("g")
         .attr("transform", `translate(${width / 2}, ${height / 2})`);
 
@@ -134,7 +148,7 @@ function crearGraficoRadar(containerSelector) {
                 .attr("y1", y1)
                 .attr("x2", x2)
                 .attr("y2", y2)
-                .style("stroke", level === levels ? "black" : "#999") // Exterior en azul, intermedias en gris
+                .style("stroke", level === levels ? "#0288D1" : "#999") // Exterior en azul, intermedias en gris
                 .style("stroke-width", level === levels ? 2 : 1); // Exterior más gruesa
         }
     }
@@ -142,13 +156,11 @@ function crearGraficoRadar(containerSelector) {
     // Dibujar líneas radiales desde el centro hasta los vértices
     const exteriorVertices = [];
     for (let i = 0; i < metrics; i++) {
-        exteriorVertices.push([
-            radius * Math.cos(angleSlice * i - Math.PI / 2),
-            radius * Math.sin(angleSlice * i - Math.PI / 2),
-        ]);
-    }
+        const x = radius * Math.cos(angleSlice * i - Math.PI / 2);
+        const y = radius * Math.sin(angleSlice * i - Math.PI / 2);
+        exteriorVertices.push([x, y]);
 
-    exteriorVertices.forEach(([x, y]) => {
+        // Dibujar la línea radial
         svg.append("line")
             .attr("x1", 0)
             .attr("y1", 0)
@@ -156,9 +168,23 @@ function crearGraficoRadar(containerSelector) {
             .attr("y2", y)
             .style("stroke", "#444") // Líneas radiales en gris oscuro
             .style("stroke-width", 1.5); // Grosor de las líneas radiales
-    });
-}
 
+        // Agregar etiqueta en cada vértice exterior
+        const offset = 1.15; // Desplazamiento reducido para acercar las etiquetas al gráfico
+        const anchor = i === 0 || i === 4 ? "middle" : x > 0 ? "start" : "end"; // Centrado para "Puntos/Partido" y "Rebotes/Partido"
+        const dy = i === 0 ? "-0.5em" : i === 4 ? "0.9em" : "0.35em"; // Ajuste vertical
+
+        svg.append("text")
+            .attr("x", x * offset) // Desplazar un poco hacia afuera
+            .attr("y", y * offset) // Desplazar un poco hacia afuera
+            .attr("dy", dy) // Ajustar posición vertical
+            .style("text-anchor", anchor) // Alinear texto
+            .style("font-size", "14px") // Tamaño más grande para mayor visibilidad
+            .style("font-weight", "bold")
+            .style("fill", "#333") // Color del texto
+            .text(labels[i]);
+    }
+}
 // Función para cargar datos del CSV desde una URL
 function cargarJugadoresDesdeArchivo() {
     const csvPath = "assets/estadisticasRendimientoJugadores.csv"; // Ruta del archivo CSV
-- 
GitLab