Question

我的代码如下

TimeSpan(50); //ticks

其中域名是2018-02-25到2018-03-03的日期

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

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

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

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

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

const ticksX = xScale.ticks(timeDay, 1)

INSTEAD我得到8天：太阳25，星期一26，星期二，星期三，星期三，星期四，星期五，星期六，星期一，星期一，4

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

Answer 1

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

有七种不同的解决方案可以获得7个滴答。

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

＆＃13;

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

＆＃13;

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

＆＃13;

另一种解决方案是使用D3 timeParse：

＆＃13;

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

＆＃13;

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

＆＃13;

最后，另一种解决方案是使用nice()：

＆＃13;

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

＆＃13;

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

＆＃13;

time.ticks没有输出正确的日期

1 个答案: