如何在d3.js中显示选定的刻度标签

Question

我正在使用d3库创建甘特图。 到目前为止，我已经完成了与此图像相似的操作：

但是，您会注意到，在小时轴上，最左边和最右边的12AM标签已经用完了。 因此，我想知道是否有一种方法可以从2AM开始到10PM结束？

我这样定义小时轴：

  x1HourAxis
    .ticks(d3.time.hours, 2)
    .tickFormat(d3.time.format('%I %p'));

我想保留此配置，但正如我所说，我想从2AM然后4AM开始直到10AM，这样我就不会在图表上产生不良的视觉效果

Answer 1

您还有更多代码吗？ 很难说是怎么回事，但是您可以尝试：

x1HourAxis
.ticks(d3.time.hours, 2)
.tickFormat(d3.time.format('%I %p'))
.tickSize(some value here for major tick size, some value here for minor tick size, 0);

将axis.tickSize（）中的最后一个参数设置为0将抑制结束刻度。

参见： https : //github.com/mbostock/d3/wiki/SVG-Axes

Answer 2

一种选择是显式设置要显示的刻度值。 您可以使用axis.tickValues([values])做到这一点

在特定情况下，您的轴将为x1HourAxis ，并且我相信values将为[2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22] x1HourAxis [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22] ，但您可能需要给定它们作为时间值（例如2:00 PM）或毫秒值。 我没有尝试显式设置时间标度的值，因此我不完全确定约定是什么。