如何在 d3.svg.axis 中定义最大刻度数 [英] How can I define a maximal amount of ticks in a d3.svg.axis

问题描述

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

I have the problem that the labels of my d3.svg.axis are sometimes overlapping. Therefor I would like to reduce the maximal amount of ticks and labels to a certain amount.

我似乎在 API 文档中找不到解决方案.

I can not seem to find a solution in the API documentation.

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

I can not use axis.tickValues() because the range is dynamic and can go from several hours to several years.

我尝试过使用 axis.ticks(9) 但它似乎没有效果.您可以查看 bl.ocks.org/3181719 上的示例.

I have tried using axis.ticks(9) but it does not seem to have an effect. You can look at an example on bl.ocks.org/3181719.

推荐答案

这两个中的一个应该为你做.只需指定 axis.ticks(10) 来指定刻度线的数量或 axis.tickValues([1,2,4]) 来指定应该的实际刻度线出现.

One of these two should do it for you. Just specify axis.ticks(10) to specify the number of tick marks or axis.tickValues([1,2,4]) to specify the actual tick marks that should appear.

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

Since you are using dates, you'll need to do something like this:

 .ticks(d3.time.weeks, 2)

您可以在 https://github.com/mbostock/d3/wiki/Time 阅读有关时间间隔的更多信息-间隔.您可以在 http://bl.ocks.org/1962173 上看到一个关于我如何执行此操作的示例，以更新基于显示的时间长度.

You can read more about time intervals at https://github.com/mbostock/d3/wiki/Time-Intervals. You can see an example about how I do this at http://bl.ocks.org/1962173 to update the ticks based on the length of time being shown.

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.svg.axis 中定义最大刻度数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！