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')

相反，我得到 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>