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.