Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I define a maximal amount of ticks in a d3.svg.axis

Tags:

d3.js

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.

like image 696
Pierre Spring Avatar asked Jul 25 '12 16:07

Pierre Spring


People also ask

What is tick size in D3?

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.

What is tickPadding in D3?

tickPadding() Function in D3. js is used to set the padding to the specified value in pixels and returns the axis.


1 Answers

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'))
}
like image 143
Bill Avatar answered Oct 13 '22 14:10

Bill