我的问题是我的d3.svg.axis
的标签有时重叠。因此,我想将刻度和标签的最大数量减少到一定数量。
我似乎在API documentation中找不到解决方案。
我不能使用axis.tickValues()
,因为范围是动态的,并且可能从几小时到几年不等。
我尝试使用axis.ticks(9)
,但似乎没有效果。您可以在bl.ocks.org/3181719上查看一个示例。
最佳答案
这两个中的一个应该为您完成。只需指定axis.ticks(10)
即可指定刻度线的数量,或者指定axis.tickValues([1,2,4])
即可指定应显示的实际刻度线。
由于您使用的是日期,因此需要执行以下操作:
.ticks(d3.time.weeks, 2)
您可以在https://github.com/mbostock/d3/wiki/Time-Intervals上了解有关时间间隔的更多信息。您可以在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'))
}
关于d3.js - 如何在d3.svg.axis中定义最大刻度数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11654836/