D3.js改变x轴路径线样式

Question

在d3.js图表​​中，默认情况下，x轴线（条形和条形标签之间的黑线）排序如下：| ---------------- | ，见下面的截图：

我如何将其更改为一条直线（两端没有垂直线）？

查看生成的SVG，此代码似乎确定了样式：<path class="domain" d="M0,6V0H824V6"></path>，它由D3自动生成。

谢谢！

Answer 1

这由axis.outerTickSize()控制：

  

外部刻度尺寸为0会抑制域路径的方形端，而是产生一条直线。

您需要做的就是设置axis.outerTickSize(0)。

Answer 2

Lars Kotthoff的答案对于4.x之前的d3版本仍然有效，版本4更改为axis.tickSizeOuter()。请注意，tickSize()也会修改外部刻度，这意味着调用tickSize()和tickSizeOuter()的顺序非常重要。

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