如何定义 d3.svg.axis 中的最大刻度数

Question

我的标签有问题 d3.svg.axis 有时是重叠的。因此，我想将刻度和标签的最大数量减少到一定数量。

我似乎无法找到解决方案 API文档.

我不能使用 axis.tickValues() 因为范围是动态的，可以从几个小时到几年不等。

我尝试过使用 axis.ticks(9) 但似乎没有效果。你可以看一个例子 bl.ocks.org/3181719.

Answer 1

这两者之一应该可以为您完成。只需指定 axis.ticks(10) 指定刻度线的数量或 axis.tickValues([1,2,4]) 指定应出现的实际刻度线。

由于您使用的是日期，因此您需要执行以下操作：

 .ticks(d3.time.weeks, 2)

您可以阅读有关时间间隔的更多信息 https://github.com/mbostock/d3/wiki/时间间隔. 。您可以在以下位置查看有关我如何执行此操作的示例 http://bl.ocks.org/1962173 根据显示的时间长度更新刻度。

if ((maxExtent - minExtent) > 1468800000) {
    x1DateAxis.ticks(d3.time.mondays, 1).tickFormat(d3.time.format('%a %d'))
    x1MonthAxis.ticks(d3.time.mondays, 1).tickFormat(d3.time.format('%b - Week %W'))        
}
else if ((maxExtent - minExtent) > 172800000) {
    x1DateAxis.ticks(d3.time.days, 1).tickFormat(d3.time.format('%a %d'))
    x1MonthAxis.ticks(d3.time.mondays, 1).tickFormat(d3.time.format('%b - Week %W'))
}
else {
    x1DateAxis.ticks(d3.time.hours, 4).tickFormat(d3.time.format('%I %p'))
    x1MonthAxis.ticks(d3.time.days, 1).tickFormat(d3.time.format('%b %e'))
}