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 don't want to impact the tick's labels. How can I only change the axis lines?

Answer 1

• this.xAxis is the g element which groups all the axis components.  g doesn't style directly so all the elements underneath are inheriting from it (including the text elements).

• You can do this with

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

• It would style just the horizontal line of the axis :

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

• It 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; }

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