使用 d3 应用 Y 轴时，会抛出错误

Question

我正在制作一个简单的条形图，目前正在尝试添加 Y 轴。当我尝试使用 call() 函数时，它会抛出一个错误。

d3.v7.min.js:2 Error: <path> attribute d: Expected number, "M-6,NaNH0VNaNH-6".

有谁知道这是怎么回事？我在下面提供了我的代码。

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);
    });

谢谢。

Answer 1

没关系，我知道了！我忘记了域和范围的括号！

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)
    });

使用 d3 应用 Y 轴时，会抛出错误

When applying the Y axis using d3, it throws an error

javascript

charts

compiler-errors

graph

d3.js