我想用 d3 从 X 轴上删除逗号，但是 tickFormat 不起作用，而是抛出一个错误答案

【问题标题】：I want to remove the commas from the X axis with d3, but tickFormat does not work and instead, throws an error我想用 d3 从 X 轴上删除逗号，但是 tickFormat 不起作用，而是抛出一个错误
【发布时间】：2021-12-29 20:56:09
【问题描述】：

我正在制作一个以 X 轴为年份的条形图。目前正在尝试使用 tickFormat() 删除逗号，但它会引发错误。

Uncaught (in promise) TypeError: svg.append(...).attr(...).attr(...).classed(...).call(...).tickFormat is not a function at

有谁知道怎么回事？我的代码：

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', 1060.4)
    .attr('height', 690);

    const xScale = d3.scaleLinear()
    .domain([1947, 2015])
    .range([0, 961]);

    svg.append('g')
    .attr('transform', 'translate(50, 638)')
    .attr('id', 'x-axis')
    .classed('tick', true)
    .call(d3.axisBottom(xScale))
    .tickFormat(d3.format("d"))
    });

【问题讨论】：

标签： javascript d3.js charts

【解决方案1】：

原来我必须将它嵌套在轴的 call 中。

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

    const svg = d3.select('body')
    .append('svg')
    .attr('width', 1060.4)
    .attr('height', 690);
        console.log(dataNumsOnly)
    svg.selectAll('rect')
    .data(dataNumsOnly)
    .enter()
    .append('rect')
    .classed('bar', true)
    .attr('width', 3)
    .attr('height', d => d / 32)
    .attr("x", (d, i) => i * 3.5)
    .attr('transform', 'translate(50, 38.4)')
    .attr('y', d => 600 - d / 32)
    .style('fill', "#8abccf");
    
    svg.append('text')
    .attr('transform', 'translate(420, 50)')
    .classed('info', true)
    .text('More Information: http://www.bea.gov/national/pdf/nipaguid.pdf');

    svg.append('text')
    .classed('info', true)
    .attr('transform', 'rotate(-90)')
    .attr('x', -420)
    .attr('y', 90)
    .text('Gross Domestic Product');

    const yScale = d3.scaleLinear()
    .domain([0, 20000])
    .range([600, 0]);

    svg.append('g')
    .attr('transform', 'translate(50, 38)')
    .classed('tick', true)
    .attr('id', 'y-axis')
    .call(d3.axisLeft(yScale)
    .ticks(10));

    const xScale = d3.scaleLinear()
    .domain([1947, 2015])
    .range([0, 961]);

    svg.append('g')
    .attr('transform', 'translate(50, 638)')
    .attr('id', 'x-axis')
    .classed('tick', true)
    .call(d3.axisBottom(xScale)
    .tickFormat(d3.format('d')));
    });

【讨论】：