D3.js change x-axis path line style

Question

In d3.js charts, the x-axis line (black line between the bars and bar labels) sort of looks like this by default: |----------------|, see screenshot below:

How would I change this to just a straight line (no vertical lines on either end)?

Looking at the generated SVG, this code seems to be determining that style: <path class="domain" d="M0,6V0H824V6"></path>, which is auto-generated by D3.

Thanks!

Answer 1

This is controlled by axis.outerTickSize():

An outer tick size of 0 suppresses the square ends of the domain path, instead producing a straight line.

All you need to do is set axis.outerTickSize(0).

Answer 2

Lars Kotthoff's answer is still valid for d3 versions prior to 4.x, with version 4 it changed to axis.tickSizeOuter(). Note that tickSize() modifies the outer ticks as well, which means the order of calling tickSize() and tickSizeOuter() is important.

d3.axisBottom(xScale)
    .tickValues(series)
    .tickSize(5)
    .tickSizeOuter(0)
);