使用D3.js添加Y轴时出现<path>属性d期望数值报错如何解决？

报错触发原因 #

• 你定义d3.scaleLinear()比例尺时，domain()、range()方法的传参不符合D3的语法要求：这两个方法需要传入数组格式的参数，你直接传入了两个独立数值，导致比例尺无法正常计算数值映射关系，返回值为NaN。生成Y轴路径时读取到非法的NaN数值，就触发了<path> attribute d: Expected number的报错。
• 你当前写死的0,100值域也和实际GDP数据不匹配，即使语法修复后也会出现刻度和柱状图高度不对应的问题。

修复方案 #

1. 修改比例尺的传参格式，给domain、range的参数加上数组方括号
2. 用d3.max()动态读取你的数据最大值作为值域上限，匹配实际数据
3. 可给Y轴容器添加横向偏移，避免Y轴超出SVG可视区域，同时调整柱状图的X坐标避免和Y轴重叠

修复后的核心代码片段 #

let dataNumsOnly = [];
let labels = [];

fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json')
    .then(response => response.json())
    .then(data => {
        let dataForChart = data.data;
        for (let i = 0; i < dataForChart.length; i++) {
            dataNumsOnly.push(dataForChart[i][1]);
            labels.push(dataForChart[i][0]);
        }

    let svg = d3.select('body')
    .append('svg')
    .attr('width', 962)
    .attr('height', 600);

    let yScale = d3.scaleLinear()
    .domain([0, d3.max(dataNumsOnly)]) // 改为数组传参，动态取数据最大值
    .range([600, 0]); // 改为数组传参
    
    const yAxis = d3.axisLeft()
    .scale(yScale);
    // Y轴右移40px避免贴边
    svg.append('g')
    .attr('transform', 'translate(40,0)')
    .call(yAxis);

    svg.selectAll('rect')
    .data(dataNumsOnly)
    .enter()
    .append('rect')
    .attr('width', 3)
    .attr('height', d => d / 32)
    .attr("x", (d, i) => 40 + i * 3.5) // 柱状图同步偏移40px，避免和Y轴重叠
    .attr('y', d => 600 - d / 32)
    .style('fill', "rgb(51, 173, 255)");
    });

内容的提问来源于stack exchange，提问作者truongmleon