Here is my code. I want to change the color of the actual axis line from black to grey.

var xAxisCall = d3.axisBottom(x);
  g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0, " + height + ")")
    .call(xAxisCall)
    .selectAll("text")
        .attr("y", "10")
        .attr("x", "-5")
        .attr("text-anchor", "end")
        .attr("transform", "rotate(-40)")
        .style("fill", "#999999");

Here is my code. I want to change the color of the actual axis line from black to grey.

var xAxisCall = d3.axisBottom(x);
  g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0, " + height + ")")
    .call(xAxisCall)
    .selectAll("text")
        .attr("y", "10")
        .attr("x", "-5")
        .attr("text-anchor", "end")
        .attr("transform", "rotate(-40)")
        .style("fill", "#999999");

• javascript
• d3.js
• visualization

• 1 add a CSS style that address the path in the g: .x.axis path { stroke:red;} – rioV8 Commented Jan 18, 2019 at 20:35

1 Answer 1

If you're using D3 v5 (and possibly v4) the default styling is now embedded at the element level, which saves you having to specify it yourself in CSS. One way to get over this is to override it with CSS's !important flag.

.x.axis line {
    stroke: gray !important;
}

Alternatively re-apply it to the elements after calling the axis using d3:

d3.selectAll(".x.axis line")
    .style("stroke","gray");

A little finessing may be required, but the principle should work.