javascript - 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 个刻度值)...1:00 AM...(6 个刻度值)...2:00 AM 等。或者可能是00:00 AM...(12 个刻度值)...2:00 AM...(12 个刻度值)...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

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