Changing the color of an axis line in a D3 chart

Solution 1:

First, separate the code of axis from its parts:

const axisBottom = d3.axisBottom(x)
  .tickFormat(d3.timeFormat("%b"));

const axisBottomG = svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(axisBottom);

axisBottomG.classed('axisGrey', true);

axisBottomG.selectAll("text")
  .attr("y", 0)
  .attr("x", 9)
  .attr("dy", ".35em")
  .attr("transform", "rotate(45)")
  .style("text-anchor", "start");

Then, inspect (F12) axis <g> element to make sure it has axisGrey class and has the class styles as well.