如何在d3.svg.axis中定义最大量的ticks [英] 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 /时间间隔。您可以在 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中定义最大量的ticks的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!