D3 v5 - How to setup custom xAxies ticks, bypassing default Scale

I’m trying to create a graph with custom ticks from an array of data I created, however it doesn’t seem to be spreading along the xAxis…its at position ‘0’. I dont’ want to use the default xScale because it presents too many ticks…and the tick(x) method doesn’t work. I inspected the code to find that each group the tick belongs to has a translate value of (NaN,0). Is there a way for me to adjust that? I’m been on this single problem for about 2 weeks and I’ve hit a wall.

Thanks in advanced, and I must ask that you please do not give me the answer, I would much rather you point me in the right direction; much appreciated.

xAxies

        const yScale = d3.scaleLinear()
                        .domain([0, d3.max(Object.values(chartData),d => d.gdp)])
                        .range([innerHeight, 0]);         

        const xScale = d3.scaleBand()
                        .domain(Object.values(chartData).map(d => d.gdp))
                        .range([0, innerWidth])
                        .padding(.1)
        
        const xAxisTickGenerator = d3.axisBottom(xScale)
        const yAxisTickGenerator = d3.axisLeft(yScale)

        const svg = d3.select('body')
                            .append('svg')
                            .attr('width', canvasDemensions.w)
                            .attr('id', 'canvas')
                            .attr('height', canvasDemensions.h)
                              .append('g')
                              .attr('transform', `translate(${canvasDemensions.grpX},${canvasDemensions.grpY})`)

        const ytd = '1950 1955 1960 1965 1970 1975 1980 1985 1990 1995 2000 2005 2010 2015'.split(' ').map(e => +e)

        svg.append('g').call(yAxisTickGenerator)
                        .attr('transform', `translate(-1,0)`)

        xAxisTickGenerator.tickValues(ytd)
 
        svg.append('g').call(xAxisTickGenerator)
                        .attr('transform', `translate(0,360)`)
                                             
    
        const bar = svg.selectAll('rect')
                        .data(Object.values(chartData))
                        .enter()
                        .append('rect')
                        .attr('x',d => xScale(d.gdp))
                        .attr('width',xScale.bandwidth())
                        .attr('y',d => yScale(d.gdp))
                        .attr('height', d => innerHeight - yScale(gdp(d)))

                        .attr('class',  'bar')
                        
      });```

disregard… after a bit more research, I think I found something that will work.

I am having the same problem. Would you mind sharing your solution, please :smiley:?

Hi @umeshrai508!

Welcome to the forum!

This post was made almost a year ago and the original poster has not been active on the forum for a few months.

You will get more responses if you create your own new topic where people can assist you there.

Thanks!