d3.js - 自定义时间间隔无限循环

Question

我正在尝试创建一个自定义间隔，以仅在 d3 时间范围内呈现我想要的刻度。我可以像这样部分实现这一点：

const customInterval = d3.timeMonth.filter(date => {
  return d3.timeMonth.count(0, date) % 2 === 0;
});

然后我可以将它与我的轴一起使用：

axis.ticks(customInterval)

在这种情况下，我每奇数月渲染一个刻度。当我想根据已知日期限制刻度时，问题就来了。例如，我可能只想在 2020/03/01 这样的日期之后呈现刻度。因此，采用相同的方法，我会执行以下操作：

const customInterval = d3.timeMonth.filter(date => {
  return date > moment('2020/03/01', 'YYYY/MM/DD').toDate();
});

上面的代码导致无限循环。在这种情况下，我使用矩，但不使用矩也可以观察到相同的行为。

如何根据特定时间过滤掉具有自定义间隔的刻度？

此处复制：https ://codepen.io/garethdn/pen/NWNYzgN

标签： d3.js

Answer 1

还是不知道为什么会有无限循环。我安慰了date它，它将从 2020 年开始到“Fri Jun 01 -1379”。

但您可以使用 呈现日期tickValues，请参见此处。

如果指定了 values 数组，则指定的值用于刻度，而不是使用刻度的自动刻度生成器。

axis.tickValues(scale.ticks().filter(d=>{
    return d > cutOffDate;
}))
.tickFormat(d => moment(d).format('MMM'))

工作演示

不使用 tickValues

1. 像往常一样生成刻度

2. 删除之前的那些cutOffDate

    axisSelection
    .attr('transform', "translate(0, 50)")
    .call(axis)
    .call(g=>{
        g.selectAll(".tick")
            .each(function(d) {
            if(d < cutOffDate) {
                d3.select(this).remove()
            }
          })
    });
   

工作演示