d3 axis labels and ticks are invisible

I am trying to view the axis labels of my d3 timeline chart. We are using v3 of d3 at work which can’t be easily changed (there are many charts written this way)

For some reason that I can’t figure out for the life of me, the CSS of the text elements inside the SVG are not visible. The elements exist in HTML, and they can be selected using the inspector, but I cannot see the labels or the ticks.

My code is as follows:

execution_history.js:

var COLORS = ["green", "red", "blue", "orange", "indigo",
              "fuchsia", "black", "cyan", "darkgreen", "pink"];

var MARGINS = {
    top : 0,
    bottom : 0,
    left: 0,
    right: 0
};


var TRANSLATE = function(x,y) {
    return "translate(" + x + "," + y + ")";
};


var createGraphRoot = function(rootNode, params) {
    d3.select(rootNode).selectAll("svg").remove();

    var margins = params.margins || MARGINS;

    var root = d3.select(rootNode)
                 .append("svg:svg")
                    .attr("width", params.width + margins.left
                                                + margins.right)
                    .attr("height", params.height + margins.top
                                                  + margins.bottom)
                 .append("g")
                    .attr("transform", TRANSLATE(margins.left,
                                                 margins.top));

    return root;
};

var applyScales = function(root, xScale, yScale) {
    var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(d3.time.day, 1);
    var yAxis = d3.svg.axis().scale(yScale).orient("left");

    /*var maxRange = function(scale) {
        // rangeExtent is more accurate for ordinal scales
        return d3.max((scale.rangeExtent || scale.range)());
    };
     */

    root.append("g")
        .attr("class", "x axis")
        .attr("transform", TRANSLATE(0, yScale.rangeExtent()[1]))
        .call(xAxis);

    root.append("g")
        .attr("class", "y axis")
        .call(yAxis);
};

var fillWithData = function(root, data, xScale, yScale, barColor) {
    root.selectAll("rect")
        .data(data)
        .enter().append("rect")
        .attr("x", function(d) { return xScale(d.start); })
        .attr("y", function(d) { return yScale(d.name); })
        .attr("width", function(d) { return xScale(d.end) - xScale(d.start); })
        .attr("height", yScale.rangeBand())
        .attr("fill", barColor);
}

////////////////////////////////////////////////////////////////////////////
// Exports


var executionHistoryTimeline = function(rootNode, data, startDate, endDate) {
    data = [
        {name: "Task 1", start: new Date("2023-05-01"), end: new Date("2023-05-02")},
        {name: "Task 2", start: new Date("2023-05-02"), end: new Date("2023-05-03")},
        {name: "Task 3", start: new Date("2023-05-01"), end: new Date("2023-05-03")}
    ];
    startDate = new Date("2023-05-01");
    endDate = new Date("2023-05-03");

    var width= 800, height= 200;
    var root = createGraphRoot(rootNode, {width:width, height:height});

    var xScale = d3.time.scale()
        .domain([new Date(startDate), new Date(endDate)])
        .range([0, width])

    var yScale = d3.scale.ordinal()
        .domain(data.map(function(d) { return d.name; }))
        .rangeRoundBands([0, height], 0.1);

    applyScales(root, xScale, yScale);
    fillWithData(root, data, xScale, yScale, 'steelblue');
}

execution_history.css:

/* Ensure SVG elements are visible */
.axis path,
.axis line {
    fill: black;
    stroke: black;
    shape-rendering: crispEdges;
    visibility: visible;
}

.axis text {
    fill: black;
    font-size: 12px;
    visibility: visible;
}

text {
    fill: black;
}

rect {
    fill: #009900;
    stroke: black;
    stroke-width: 1px;
}

What I have tried so far is manually updating the fill, stroke, color, fields both in CSS & in the inspector, all the way up the chain to the SVG, and still nothing. I’ve tried adding visibility tags to every element as well. I’ve tried adding the fill attributes directly to the axis creation like this post said: d3js v4 x-axis-label is there but not visible but this also had no visible changes.

Can anyone provide some assistance as to what might be going on here? I’m not even sure what to investigate next. I attribute d3 to voodoo magic at this point, and I’ve got some deliverables that I need to hit this sprint. I’d rather not try to bring in a new charting standard.

I’m happy to provide any other details necessary, but you should be able to reproduce based on the code I posted above.

Thank you in advance!