即使我將刻度間隔設置為每7天，為什么我的d3圖表的x軸將每個月的第一天都作為刻度顯示？

Question

我是d3的新手，但是我已經使用d3.timeDay.every(7) x軸的刻度間隔設置為每7天一次。 但是，在創建圖形時，我還會看到每個月的第一天添加了一個勾號。 例如，即使11/1不是在10/29之后的7天， 我的圖形也會在10 / 1、10 / 8、10 / 15、10 / 22、10 / 29和11/1處顯示刻度。 如果我將此范圍擴展到包括多個月，則每個月的第一天都會出現一個勾號。

我在下面包含了該軸的代碼。 是什么導致每月的第一天顯示為刻度？

  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，因此間隔號在每個月初重置。 如果step無效，則返回null。 如果step為1，則返回此間隔。 來自d3文檔

如果 .tickFormat(function(d, i) { return d; })您還可以使用 .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