D3 scatterplot hot to manage domain and range properly?

Question

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

Answer 1

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 the years not displaying as intended on the X-axis.

Here is a link with further information on tickformat: https://github.com/d3/d3-axis