Estoy tratando de ordenar las calificaciones de los estudiantes en orden ascendente, pero cuando lo intento, no ordena los primeros 3 valores correctamente. Intenté ordenarlo más tarde cuando agregué los datos al gráfico, pero luego no funcionó, así que no estoy seguro de qué es exactamente lo que está fallando. ¿Alguien sabe por qué?
<!DOCTYPE html> <meta charset="utf-8"> <!-- Load d3.js --> <script src="https://d3js.org/d3.v6.js"></script> <!-- Create a div where the graph will take place --> <div id="Studentmarks"></div> <script> // set the dimensions and margins of the graph const margin = {top: 20, right: 30, bottom: 40, left: 90}, width = 460 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; // append the svg object to the body of the page const svg = d3.select("#Studentmarks") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // Parse the Data d3.csv("https://raw.githubusercontent.com/sidh4550/321/main/test2.csv").then( function(data) { data.sort((a, b) => d3.ascending(a.marks, b.marks)); // Add X axis const x = d3.scaleLinear() .domain([0, 100]) .range([ 0, width]); svg.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("transform", "translate(-10,0)rotate(-45)") .style("text-anchor", "end"); // Y axis const y = d3.scaleBand() .range([ 0, height ]) .domain(data.map(d => d.Student)) .padding(.1); svg.append("g") .call(d3.axisLeft(y)) //Bars svg.selectAll("myRect") .data(data) .join("rect") .attr("x", x(0) ) .attr("y", d => y(d.Student)) .attr("width", d => x(d.marks)) .attr("height", y.bandwidth()) .attr("fill", "#69b3a2") }) </script>sus marcas están en la cadena, por lo que debe analizarlas antes de ordenarlas
data.sort((a, b) => d3.ascending(parseInt(a.marks), parseInt(b.marks)));