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，星期四，星期五，星期六3

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

const ticksX = xScale.ticks(timeDay, 1)

然而，我得到的是6天：太阳25，星期一26，星期二27，星期三28，星期四，星期五

所以我尝试用momentjs将我的右域增加1：

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

INSTEAD我得到8天：太阳25，星期一26，星期二27，星期三28，星期四，星期五，星期六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>