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)
);