es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Al aplicar el eje Y utilizando d3, se produjo un error.

Estoy haciendo un gráfico de barras simple y actualmente intentando agregar el eje Y. Cuando intento usar la función call(), lanza un error.

d3.v7.min.js:2 Error: atributo d: se esperaba un número, “M-6, NaNH0VNaNH-6”.

¿Alguien sabe qué 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++) { //obtiene los datos y etiquetas.
            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.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Parece que el problema está con la función call(). Parece que estás intentando crear un eje Y, así que debes asegurarte de que el atributo d del elemento path sea un número. Puedes intentar cambiar el atributo d del elemento path a algo como M-6,0V0H-6 y ver si eso funciona.

Comments are closed.