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