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";
});

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

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

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

1 个答案: