Setting labels on axis ticks in D3 V5 - d3.js

Question

I'm trying to set the x-axis labels to date strings I create. I tried using scaleTime() but found that to be a nightmare and not really required for what I want to do.
I've tried scaleLinear() and scaleOrdinal() with 'almost' success, but didn't get there totally
In the examples below 'xlabels' is an array of about 23 strings, like:
["02 JAN 2020", "03 JAN 2020" ... etc]
First trying scaleLinear:
function draw_Xscale() {
var xScale1 = d3.scaleLinear()
.domain([0, xlabels.length])
.range([0, width]);
const g = svg.append("g")
.attr("class", "axis")
.attr("transform", `translate(0, ${height - 10})`);
let x_axis = d3.axisBottom(xScale1).ticks(tlabels.length);
g.call(x_axis).selectAll("line,path").style("stroke", "brown");
}
This draws an axis but the tick labels are numbers [0 .. 22] - not what I want. I tried stuff from some online examples something like the following tacked on:
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-65)");
but simply couldnt get it to work - probably some subtlety of the syntax I don't understand.
I also tried scaleOrdinal:
function draw_OrdScale() {
let arr = Array.from({length: xlabels.length}, (e, i) => i);
var ordinalScale = d3.scaleOrdinal()
.domain(xlabels)
.range([0, width]);
const g = svg.append("g")
.attr("class", "axis")
.attr("transform", `translate(0, ${height-100})`);
let x_axis = d3.axisBottom(ordinalScale).ticks(tlabels.length);
g.call(x_axis).selectAll("line,path").style("stroke", "brown");
}
This drew an axis with the labels I specified, but half of them were piled up on top of each other on the left and the other half on the right. Obviously I have the range wrong but not sure what it wants to be. I tried setting the range to:
.range([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22]);
But this just had them a scrunched up into a black smear on the left.
I spent most of the day looking for examples of what I want to do but the few that looked like they should work, didn't.
TIA for any insights

Answer 1

We're going to try to make the scale a bit more generic, in case you have more data.
Suppose that data is an array of objects, with a date property. The first step is to get the date to an usable state:
function toTitleCase(str) {
return str.replace(/[^-'\s]+/g, function(word) {
return word.replace(/^./, function(first) {
return first.toUpperCase();
});
});
}
var data = data.map(d => toTitleCase(d.date.toLowerCase()))
This will convert every date from "02 JAN 2020" to "02 Jan 2020".
Afterwards, we need to use a date parser. This will convert every date to a real date object:
var parseTime = d3.timeParse("%d %b %Y");
data = data.map(d => parseTime(d.date);
Finally, we can now use a time scale, using d3.extent() to find the min and max value in your dataset. d3.extent() will return an array with two values, the min and the max, and it works on dates, like the rest of D3:
d3
.scaleTime()
.domain(d3.extent(d => d.date))
.nice() // Make the scale look prettier.
That'll give you a scale that works automatically with any date and will work as you add more values.