I want to remove the commas from the X axis with d3, but tickFormat does not work and instead, throw-CodePudding

I am making a bar chart with the years on the X axis. Currently trying to remove the commas using, tickFormat() but it throws an error.

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

Does anyone know what is wrong? My code:

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

CodePudding user response：

Turns out I had to nest it inside the call for the axis.

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