diff --git a/script.js b/script.js index 9eca9b5a7777ec336a1c2804d201f5451cce689e..74c1fbeb5d98730d88e916f8cb47d3718a63e4a7 100644 --- a/script.js +++ b/script.js @@ -214,8 +214,32 @@ function crearGraficoRadar(containerSelector, jugadoresSeleccionados = [], maxim .style("stroke", jugador.color) .style("stroke-width", 2); }); + + // Añadir los nombres de los jugadores seleccionados con sus colores en la esquina superior derecha + const legendGroup = svg.append("g") + .attr("transform", `translate(${radius + margin}, ${-radius - margin})`) + .attr("class", "legend"); + + jugadoresSeleccionados.forEach((jugador, index) => { + const legendItem = legendGroup.append("g") + .attr("transform", `translate(0, ${index * 20})`); + + // CÃrculo de color + legendItem.append("circle") + .attr("r", 8) + .attr("fill", jugador.color); + + // Nombre del jugador + legendItem.append("text") + .attr("x", 15) + .attr("y", 4) + .style("font-size", "14px") + .style("fill", "#333") + .text(jugador.Nombre); + }); } + function cargarJugadoresDesdeArchivo() { const csvPath = "assets/estadisticasRendimientoJugadores.csv"; const ladoIzquierdo = d3.select("#lado-izquierdo");