Change the thickness/width of a d3 chart's axis lines without affecting tick labels

Question

I'm working on a Power Bi d3 chart and I'm trying to change the thickness/width of the chart's axis lines. This following code changes the width of the line but also affects the tick's labels, drastically altering the font.

this.xAxis
   .style({ 'stroke': 'black', 'fill': 'none', 'stroke-width': '1px'}) 
   .call(xAxis);

I want to NOT impact the tick's labels. How can I only change the axis lines?

Answer 1

Don't know anything about powerbi but I'm guessing that this.xAxis is the g element which groups all the axis components. A g doesn't style directly so all the elements underneath are inheriting from it (including the text elements).

So, the answer here is to get more specific with your style. You can do this with

this.xAxis.select('path')
  .style({ 'stroke': 'black', 'fill': 'none', 'stroke-width': '1px'});

Which would style just the horizontal line of the axis. Or:

this.xAxis.selectAll('line')
  .style({ 'stroke': 'black', 'fill': 'none', 'stroke-width': '1px'});

Which would style the tick marks.

As an aside, I wouldn't style like this at all and would probably do it through conventional CSS:

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
  stroke-width: 10px;
}

This would set the font for the entire axis g and set the tick marks and line across the axis to be black and thick.