How to display the value for the final tick on axis in D3?

Question

I am using d3.time.scale to generate x-axis, and the domain ranges from 1980 to 2013 (year) However, tick value only displays upto 2012, not 2013.

I tried .ticks(), but the final tick value does not display until tick count is 25...

Although I can add the final value by manually increasing the domain upto 2014, is there a way to display the tick value for the last tick?

xAxis = d3.svg.axis()
        .scale(xScale).tickSize(20)

var maxYear = format.parse('2014')

xScale = d3.time.scale().domain([min,max])
    .range([100,width-200])    //domain = [1980 ~ 2013] 


var min = d3.min(data, function(d) {
    return d.Year;              // + operator converts string to number.
})

var max = d3.max(data, function(d) {
    return d.Year;
})

Thank you in advance.

Answer 1

Have you tried using .nice()?

https://github.com/d3/d3-scale/blob/master/README.md#time_nice

This should do the job:

xScale = d3.time.scale().domain([min,max])
    .range([100,width-200])    //domain = [1980 ~ 2013]
    .nice()