9

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.

user3562812
  • 1,751
  • 5
  • 20
  • 30

1 Answers1

16

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()
Mehdi
  • 7,204
  • 1
  • 32
  • 44
  • Seems to have no effect – Code Whisperer Jul 18 '17 at 19:30
  • @CodeWhisperer You may be using d3 v4. Terminology is a bit different: `scaleTime` instead of `time.scale`. Function `nice` is still here, have a look at [d3.js v4 documentation](https://github.com/d3/d3-scale/blob/master/README.md#time_nice) – Mehdi Jul 22 '17 at 09:58