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.
I can not seem to find a solution in the API documentation.
I can not use axis.tickValues()
because the range is dynamic and can go from several hours to several years.
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.
tickSize() function in D3. js is used to set the inner and outer tick size to the specified value and returns the axis. If size is not specified, returns the current inner tick size, which defaults to 6.
tickPadding() Function in D3. js is used to set the padding to the specified value in pixels and returns the axis.
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)
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'))
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With