Question

我正在创建一个图表，其中包含连续几天的每日数据。数据数组中的每个对象都有一个日期属性，即当天午夜的JavaScript日期表示。以下是相关代码：

  const x = d3.scaleTime()
    .range([0, width])
    .domain(d3.extent(data.map(d => d.date)));

  const days = data.length;
  let interval = 1;
  while (width / (days - 1) * interval < 60) {
    interval += 1;
  }

  const xAxis = d3.axisBottom(x)
    .tickFormat(d3.timeFormat('%b %d'))
    .ticks(d3.timeDay.every(interval));

问题是d3.timeDay.every（interval）在每个月的开始重置。 d3文档清楚地指出了这一点，因此它不是一个错误。

不幸的是，当日期越过月份边界时，它会导致刻度和标签太靠近。

有没有办法让X轴（这是一个scaleTime）在每个间隔天创建一个滴答，而不管月份边界？

Answer 1

好的，问这个问题让我关注。我找到了答案。我需要提供自己的刻度值。这很有效：

  const xValues = data.filter((d, i) => i % interval === 0).map(d => d.date);

  const xAxis = d3.axisBottom(x)
    .tickFormat(d3.timeFormat('%b %d'))
    // .ticks(d3.timeDay.every(interval))
    .tickValues(xValues);

我是d3的初学者，欢迎更好的答案。

d3.timeDay.every（步骤）每个月重置一次，导致碰撞轴标签

1 个答案: