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

Question

我正在使用d3库来创建甘特图。到目前为止，我已经做了类似于这个图像的事情：

但是，您可以注意到，在小时轴上，最左侧和最右侧的12AM标签正在运行。那么，我想知道是否有办法从凌晨2点开始计时并在晚上10点结束？

我将小时轴定义为：

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

我想保留这种配置，但正如我所说，我想从凌晨2点开始，凌晨4点......直到上午10点，这样我就不会在图表上出现这种糟糕的视觉效果

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]，但您可能需要将它们作为时间值（例如2） ：00 PM）或以ms值表示。我没有尝试明确设置时间尺度的值，所以我不完全确定约定是什么。