d3.js - 如何混合有用的自动生成的记号（），同时还指定您希望记号间隔下降到的最低粒度

Question

我正在使用 D3 创建一个时间序列图，并且我希望 x 轴刻度不低于 2 小时而不会创建太多刻度。

以这个建立我的观点的例子为例：

 var x = d3.scaleTime().domain([new Date(2020, 4, 8).setHours(8), new Date(2020, 4, 9)])
        .range([0, 960]).ticks()

ticks() 自动计算刻度，因为没有给出计数或时间间隔参数，结果如下：

console.log(x) 输出：

0: Fri May 08 2020 08:00:00 
1: Fri May 08 2020 09:00:00 
2: Fri May 08 2020 10:00:00 
3: Fri May 08 2020 11:00:00 
4: Fri May 08 2020 12:00:00 
5: Fri May 08 2020 13:00:00 
6: Fri May 08 2020 14:00:00 
7: Fri May 08 2020 15:00:00 
8: Fri May 08 2020 16:00:00 
9: Fri May 08 2020 17:00:00 
10: Fri May 08 2020 18:00:00 
11: Fri May 08 2020 19:00:00 
12: Fri May 08 2020 20:00:00 
13: Fri May 08 2020 21:00:00 
14: Fri May 08 2020 22:00:00 
15: Fri May 08 2020 23:00:00 
16: Sat May 09 2020 00:00:00 

这里的时间粒度太低（1 小时）。我知道我可以通过将代码更改为：

 var x = d3.scaleTime().domain([new Date(2020, 4, 8).setHours(8), new Date(2020, 4, 9)])
        .range([0, 960]).ticks(d3.timeHour.every(2))

哪个输出：

0: Fri May 08 2020 08:00:00 
1: Fri May 08 2020 10:00:00 
2: Fri May 08 2020 12:00:00 
3: Fri May 08 2020 14:00:00
4: Fri May 08 2020 16:00:00 
5: Fri May 08 2020 18:00:00 
6: Fri May 08 2020 20:00:00 
7: Fri May 08 2020 22:00:00 
8: Sat May 09 2020 00:00:00 

完美的。但是问题是，如果我总是将 d3.timeHour.every(2) 传递到 ticks 函数中，它会为每个场景提供太多的滴答声。例如，如果域是两个相隔 5 天的日期，我会得到 100 ticks，而如果我只是为那个例子做了 ticks() ，我会得到相当数量的 ticks 。

有没有办法告诉 d3 在每种情况下都使用自动生成的 ticks() 但同时不要降低到低于 2 小时的时间间隔？

标签： d3.js