Estoy haciendo un gráfico de barras simple y actualmente estoy tratando de agregar el eje Y. Cuando trato de usar la función call() , arroja un error.
d3.v7.min.js:2 Error: <path> attribute d: Expected number, "M-6,NaNH0VNaNH-6".¿Alguien sabe lo que está mal? Proporcioné mi código a continuación.
let dataNumsOnly = []; let labels = []; fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json') .then(response => response.json()) .then(data => { let dataForChart = data; dataForChart = dataForChart.data; for (let i = 0; i < dataForChart.length; i++) { //grabs data and labels. dataNumsOnly.push(dataForChart[i][1]); labels.push(dataForChart[i][0]); } let svg = d3.select('body') .append('svg') .attr('width', 962) .attr('height', 600); svg.selectAll('rect') .data(dataNumsOnly) .enter() .append('rect') .attr('width', 3) .attr('height', d => d / 32) .attr("x", (d, i) => i * 3.5) .attr('y', d => 600 - d / 32) .style('fill', "rgb(51, 173, 255)"); let yScale = d3.scaleLinear() .domain(0, 100) .range(600, 0); const yAxis = d3.axisLeft() .scale(yScale); svg.append('g') .call(yAxis); });Gracias.
¡No importa, lo tengo! ¡Olvidé los corchetes para el dominio y el rango!
let dataNumsOnly = []; let labels = []; fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json') .then(response => response.json()) .then(data => { let dataForChart = data; dataForChart = dataForChart.data; for (let i = 0; i < dataForChart.length; i++) { //grabs data and labels. dataNumsOnly.push(dataForChart[i][1]); labels.push(dataForChart[i][0]); } let svg = d3.select('body') .append('svg') .attr('width', 962) .attr('height', 600); svg.selectAll('rect') .data(dataNumsOnly) .enter() .append('rect') .attr('width', 3) .attr('height', d => d / 32) .attr("x", (d, i) => i * 3.5) .attr('y', d => 600 - d / 32) .style('fill', "rgb(51, 173, 255)"); let yScale = d3.scaleLinear() .domain([0, 1000]) .range([600, 0]); const yAxis = d3.axisLeft() .scale(yScale); svg.append('g') .attr('transform', 'translate(1)') .call(yAxis) });