即使我将刻度间隔设置为每 7 天，为什么我的 d3 图表的 x 轴将每个月的第一天作为刻度包含在内？

Question

我是 d3 的新手，但我已使用 .x 轴将 x 轴的刻度间隔设置为每 7 天一次d3.timeDay.every(7)。但是，当我创建图表时，我还会看到每个月的第一天添加了一个刻度线。例如，我的图表显示了 10/1、10/8、10/15、10/22、10/29 和 11/1 的刻度，即使 11/1 不是 10/29 之后的 7 天。如果我将此范围扩大到包括多个月份，我会在每个月的第一天看到一个勾号。

我在下面包含了这个轴的代码。什么可能导致每个月的第一天显示为勾号？

  const xScale = d3.scaleTime().range([0, innerWidth]);
  const tickAmount = d3.timeDay.every(7);

  chart.append("g")
    .classed('x-axis', true)
    .attr("transform", "translate(0," + innerHeight + ")")
    .call(d3.axisBottom(xScale)
    .ticks(tickAmount)
    .tickSize(-innerHeight)
    .tickFormat(d3.timeFormat('%m/%d/%y')));

Answer 1

试试吧const tickAmount = d3.timeWeek.every(1);：

请注意，对于某些时间间隔，结果日期可能不是均匀间隔的；d3.timeDay 的父区间是 d3.timeMonth，因此区间编号在每个月的月初重置。如果步骤无效，则返回 null。如果 step 为 1，则返回此间隔。来自 d3 文档

.tickFormat(function(d, i) { return d; })如果您愿意，您还可以使用从显示中过滤掉给定的刻度（例如排除第一个刻度return i>0 ? d : ''：），尽管这更麻烦。

从 d3 问题跟踪器找到了一个更好的方法：

d3.axisBottom(x)
  .ticks(d3.timeDay.filter(d=>d3.timeDay.count(0, d) % N === 0))
  .tickFormat(d3.timeFormat('%m/%d/%y'))
  .tickSizeOuter(0)

这将使您每 N 天都得到一致的滴答声，而不会重复几个月。存在刻度并不意味着数据集中该日期存在某个点，但它们会在日期范围内正确缩放。

这是一个演示：https : //beta.observablehq.com/@thmsdnnr/d3-ticks-every-7-or-10-days