0

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

在此处输入图像描述

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

我这样定义小时轴：

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

我想保持这个配置，但正如我所说，我想从凌晨 2 点开始时间，然后是 4 点......直到 10 点，这样我就不会在图表上产生这种糟糕的视觉效果

4

2 回答 2

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

于 2013-05-01T15:36:37.437 回答
0

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

在您的特定情况下，您的轴将是x1HourAxis，我相信values会是[2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22]，但您可能需要将它们作为时间值（例如下午 2:00）或以 ms 值给出。我没有尝试明确设置时间尺度的值，所以我不完全确定约定是什么。

于 2013-05-01T15:33:26.383 回答