Trying to order dates on heatMap after formatting the dates - d3.js

Question

This is how the xAxis looks after formatting the dates:
Without formatTimeMonth() and only parseTime() the xAxis if ordered correctly.
Formating dates:
var parseTime = d3.timeParse("%m/%d/%Y");
var formatTimeMonth = d3.timeFormat("%b/%Y");
data.forEach(function (d) {
d.Month = formatTimeMonth(parseTime(d.Month));
});
HeatMap:
heatMap
.width(900)
.height(800)
.dimension(dimension)
.group(FTEMonthGroup)
.margins({ left: 200, top: 30, right: 10, bottom: 35 })
.keyAccessor(function (d) { return d.key[0]; })
.valueAccessor(function (d) { return d.key[1]; })
.colorAccessor(function (d) { return +d.value.color; })
.title(function (d) {
return "Manager: " + d.key[1] + "\n" +
"FTE: " + d.value.toolTip + "\n" +
"Date: " + d.key[0] + "";
})
.on('renderlet', function (chart) {
chart.selectAll("g.cols.axis text")
.attr("transform", function () {
var coord = this.getBBox();
var x = coord.x + (coord.width / 2),
y = coord.y + (coord.height / 2);
return "rotate(-45 " + x + " " + y + ")"
})
.style("text-anchor", "right");
});
heatMap.colorCalculator(function (d, i) {
return d.value.color === null ?
'#ccc' : heatMap.colors()(d.value.color);
});

Answer 1

The issue here is that you are specifying the group key as a string. Crossfilter will apply "natural ordering" to keys in groups, so your keys are in alphabetical order.
The best way to format your ticks without changing the order is to revert your keys to dates or date-strings and then use colsLabel:
heatMap.colsLabel(d => formatTimeMonth(parseTime(d.Month)));
This is the equivalent of using
chart.xAxis().tickFormat(...)
on most of the other charts.
(The heatmap is one of a few charts that does not use d3-axis. I don't know if the original author ran into troubles with using the standard component - my guess is that they just found it easier to reinvent the wheel.)