x 轴上的自定义 D3 `tickValue` -- 水平条形图

Question

我正在尝试在 X 轴上创建自定义刻度值。

图表是从 data.csv 文件生成的。有 144 个数据点。每个数据值代表 10 分钟周期，因此第一个刻度应出现在代表 1 小时的第 6 个刻度上。

例如，如果我使用.domain([new Date('2014-03-08T12:00:00'), new Date('2014-03-9T00:00:00')])，我的 X 轴会正确，但我的图表会消失。

在这种情况下我也不能使用tickValues([])。

我应该在 X 轴上看到类似 00:00 AM...(6 tick values)...1:00 AM...(6 tick values)...2:00 AM 等的东西。或者它可能是 00:00 AM...(12 tick values)...2:00 AM...(12 tick values)...3:00 AM 等。只是为了能够自定义它。

不确定这是否可能。我尝试按照这个简单的示例 http://bl.ocks.org/phoebebright/3059392 进行操作，但同样，我得到了正确的 X 轴，但我的图表不见了。

这将是代码：https://plnkr.co/edit/kc4E43Bgo4bNMB9hKX2j?p=preview

提前谢谢你！

Answer 1

由于您的数据不包含实际日期值，这是我的解决方案：

您希望显示 6 个刻度中的一个，因为每个刻度代表 10 分钟，并且您只想显示“每小时”刻度。因此，使用您的 x 比例域定义刻度值：

.tickValues(d3.range(x.domain()[0], x.domain()[1]).filter(function(d) {
    return d % 6 === 0;
}))

然后，格式化刻度，为每个刻度添加一个:00：

.tickFormat(function(d) {
    return d/6 + ":00";
});

这是您更新的插件：https://plnkr.co/edit/8EOGt8UvYq1J8qpIdArN?p=preview

编辑：正如在 cmets 中所讨论的，这里是“am”和“pm”的解决方案：https://plnkr.co/edit/OvtVlgT4I6Y19hgoMKIK?p=preview