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

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

图表是从data.csv文件生成的。有144个数据点。每个数据值代表10分钟的周期，所以第一个记号应该出现在代表1小时的第六个记号上

例如，如果我使用

.domain（[新日期（'2014-03-08T12:00:00'）、新日期（'2014-03-9T00:00:00'））

，我将获得正确的X轴，但我的图表将消失

在这种情况下，我也不能使用

tickValues（[]）

我应该在X轴上看到的是这样的

00:00am…（6个刻度值）…1:00am…（6个刻度值）…2:00am

等。或者它可以是

00:00am…（12个刻度值）…2:00am…（12个刻度值）…3:00am

等，以便能够自定义它

不确定这是否可能。我试着遵循这个简单的例子，但同样，我得到了正确的X轴，但我的图表不见了

这就是代码：

---

提前谢谢你

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

您希望显示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：

---

编辑：如评论中所述，这里是带有“am”和“pm”的解决方案：

我很困惑。你到底想要什么？您的数据似乎根本不包含日期。我的数据不包含日期，不。我希望自定义的勾号值不是从csv文件提供的。谢谢您，Furtado先生！你又帮了大忙！我清楚地看到了您使用

.range

和

.filter

所做的操作，但它看起来仍然不够直观。如果我看到数字18:00的例子，它仍然是混乱的认识到，实际上是3小时。我会看看我是否能得到这个带有日期的json。但我需要一张全新的图表。我知道这是我能得到的最接近的。。。如果你这么说，那一定是因为我没有实际的日期值。再次感谢您！即使是在上午和下午，你也可以循环成24小时的滴答声（我可以稍后告诉你怎么做，我现在在手机上），但请注意，这将是一个完全虚假的轴。不要着急！非常感谢你！我知道这将是一个假轴。没关系！图表上显示的内容来自csv，这是最重要的。24小时内有144个数据值，间隔10分钟。非常感谢。它总是在凌晨12点（午夜）开始，对吗？我只是再看一遍你的代码。添加这样的条件语句非常聪明。我必须补充一点。再次感谢！干杯