i'm building a scatterplot https://codepen.io/DeanWinchester88/pen/QWgGMja
i couldn't make Y axis show format in xx : xx< but i dont understand why X-axis showing years like this. Pls help
https://codepen.io/freeCodeCamp/pen/bgpXyK - this is how it is suppose to look
const xScale = d3.scaleLinear()
.domain([ d3.min(years), d3.max(years) ])
.range([paddings.paddingLeft,w - paddings.paddingRight]);
const xAxis = d3.axisBottom(xScale);
svg.append("g")
.attr("transform", "translate(0," (h - paddings.paddingLeft) ")")
.attr("id","x-axis")
.call(xAxis);
CodePudding user response:
To do this you need to make use of the tickformat function
like this:var xAxis = d3.axisBottom(xScale).tickFormat(d3.format('d'));
here it is placed in your given code snippet:
const xScale = d3.scaleLinear()
.domain([ d3.min(years), d3.max(years) ])
.range([paddings.paddingLeft,w - paddings.paddingRight]);
var xAxis = d3.axisBottom(xScale).tickFormat(d3.format('d'));
svg.append("g")
.attr("transform", "translate(0," (h - paddings.paddingLeft) ")")
.attr("id","x-axis")
.call(xAxis);
This should fix your problem with the te years not displaying as intended on the X-axis.
Here is a link with further information on tickformat: https://github.com/d3/d3-axis