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

Question

我的代码如下

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

域名是日期2018-02-25至2018-03-03

我希望我的x轴显示7天：星期日25，星期一26，星期二27，星期三28，星期四1，星期五2，星期六3

所以我用d3的.ticks来获取这些滴答值

const ticksX = xScale.ticks(timeDay, 1)

但是我得到的是6天：星期日25，星期一26，星期二27，星期三28，星期四1，星期五2

所以我试图用momentjs将我的正确域增加1：

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

INSTEAD我有8天：星期日25，星期一26，星期二27，星期三28，星期四1，星期五2，星期六3，星期一4

这里发生了什么？ 我找不到模式。

Answer 1

在时间范围内指定准确的滴答有时会很困难，并且可能在D3代码中令人沮丧。 但是，这是设计使然的：时间尺度很复杂，应该自动生成足够的刻度。 在您的情况下，它变得更加复杂，因为存在小时问题（应该是午夜，但这不能保证）和时区。

有几种不同的解决方案可以使您获得7分。

第一个是将时间设置为午夜：

 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> 

另一个解决方案是使用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> 

最后，另一种解决方案是使用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>