如何在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/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'))
}