time.ticks无法输出正确的日期

Question

My code is as follows

const xScale = scaleTime()
  .domain([new Date(reports[reports.length - 1].date), new Date(reports[0].date)])
  .range([margin.left, width]

where the domain is the date 2018-02-25 to 2018-03-03

I want my x axis to show the 7 days: Sun 25, Mon 26, Tues 27, Wed 28, Thu 1, Fri 2, Sat 3

So i use d3's .ticks to get these tickvalues

const ticksX = xScale.ticks(timeDay, 1)

However what I get is 6 days: Sun 25, Mon 26, Tues 27, Wed 28, Thu 1, Fri 2

So I tried to increment my right domain by 1 with momentjs:

moment(new Date(reports[0].date)).add(1, 'days')

INSTEAD I get 8 days: Sun 25, Mon 26, Tues 27, Wed 28, Thu 1, Fri 2, Sat 3, Mon 4

What is going on here? I can't find the pattern.

Answer 1

Specifying the exact ticks in a time scale is sometimes difficult and maybe frustrating in a D3 code. However, this is by design: time scales are complex and they are supposed to automatically generate the adequate ticks. It becomes even more complicated in your case because there is the hour issue (which is supposed to be midnight, but that's not guaranteed) and the timezone.

There are several different solutions to get your 7 ticks.

The first one is setting the hour to midnight:

 const xScale = d3.scaleTime() .domain([new Date("2018-02-25").setHours(0, 0, 0, 0), new Date("2018-03-03").setHours(0, 0, 0, 0)]); const ticksX = xScale.ticks(d3.timeDay, 1); console.log(ticksX); 

 <script src="https://d3js.org/d3.v4.min.js"></script> 

Another solution is using D3 timeParse :

 const timeParse = d3.timeParse("%Y-%m-%d") const xScale = d3.scaleTime() .domain([timeParse("2018-02-25"), timeParse("2018-03-03")]); const ticksX = xScale.ticks(d3.timeDay, 1); console.log(ticksX); 

 <script src="https://d3js.org/d3.v4.min.js"></script> 

Finally, another solution is using nice() :

 const xScale = d3.scaleTime() .domain([new Date("2018-02-25"), new Date("2018-03-03")]) .nice(); const ticksX = xScale.ticks(d3.timeDay, 1); console.log(ticksX); 

 <script src="https://d3js.org/d3.v4.min.js"></script>