javascript - d3.timeDay 函数从 2023 年开始并向后运行至无穷大

Question

在我的 d3.js 图表中，我有 2002 年到 2023 年的数据。

我使用x.domain()验证了这一点，它返回:

0: Wed Jul 31 2002 00:00:00 GMT+0200 (Central European Summer Time) {}
1: Mon Jul 31 2023 00:00:00 GMT+0200 (Central European Summer Time) {}

然后我尝试创建 x 轴刻度:

let x = d3.scaleTime()
    .rangeRound([0, 600]);
let fiscal_year_ends_month = 10;
d3.axisBottom(x)
.tickFormat(d3.timeFormat("%m/%y")).ticks(data.length < 60 ? d3.timeMonth : d3.timeYear)
.ticks(d3.timeDay.filter(function(d) {
    return d.getMonth() === fiscal_year_ends_month;
}))

这应该迭代范围内的所有日期，找到满足我输入的月份条件的日期，并创建刻度。

但是，它会无限运行。

具体来说，如果我这样做:

.ticks(d3.timeDay.filter(function(d) {
    console.log(d.getFullYear(), d.getMonth(), d.getDate());
    return d.getMonth() === fiscal_year_ends_month;
}))

它似乎从我的 x.domain (2023) 末尾开始，向后运行到无穷大。我让它运行了一段时间，console.log 的最后一次输出是公元前 322 年 6 月 10 日:

-322 5 10

不用说，我的股市数据图表不应该从公元前 4 世纪开始

为什么该进程不只通过我的 x.domain() 中的日期运行？

Answer 1

可以像这样重新创建问题:

.ticks(d3.timeDay.filter(function(d) {
  console.log(d.getFullYear(), d.getMonth(), d.getDate());
  return false; // <--- generates infinite loop backward in time !!
}))

这表明您的输入数据中与您尝试过滤的月份索引有关的问题。它还表明库中存在一个错误，导致这种情况发生......

如果fiscal_year_ends_month = 10，我假设您只想获取每年 11 月份的数据？有一个d3.timeMonth您可以用于此目的的间隔，例如:

.ticks(d3.timeMonth.filter(function(d) {
  return d.getMonth() === fiscal_year_ends_month;
}));

工作示例:

// your constant
const fiscal_year_ends_month = 10;

// sample data
let data = [];
for (let i= 0; i<2370; i++) {
  let d = new Date()
  data.push({
    dt: d.setDate(d.getDate() + i),
    val: i
  });
}

// time scale
let x = d3.scaleTime()
  .domain(d3.extent(data, d => d.dt))
  .range([0, 540]);
  
// render
let svg = d3.select("body")
  .append("svg")
  .attr("width", 600)
  .attr("height", 150)
  .append("g")
  .attr("transform", "translate(30,30)");
  
let xAxis = d3.axisBottom(x)
  .tickFormat(d3.timeFormat("%m/%y"))
  .ticks(d3.timeMonth.filter(function(d) {
    return d.getMonth() === fiscal_year_ends_month;
  }));
  
svg.append("g")
  .attr("transform", "translate(0,90)")
  .call(xAxis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>