Question

我是d3的新手，但是我使用d3.timeDay.every(7)为每7天设置了x轴的刻度间隔。但是，当我创建图表时，我还会看到每个月的第一天添加了刻度线。例如，my graph显示10 / 10,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，因此间隔号在每个月的开始重置。如果step无效，则返回null。如果step为1，则返回此间隔。 from the d3 docs

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

找到了更好的方法from d3 issue tracker：

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

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

1 个答案: