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

Question

我是 d3 的新手，但我使用 d3.timeDay.every(7) 将 x 轴的刻度间隔设置为每 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。如果步长为 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