d3.timeDay.every(步骤)每个月重置一次,导致碰撞轴标签

时间:2016-08-24 18:22:01

标签: d3.js

我正在创建一个图表,其中包含连续几天的每日数据。数据数组中的每个对象都有一个日期属性,即当天午夜的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)在每个间隔天创建一个滴答,而不管月份边界?

1 个答案:

答案 0 :(得分: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的初学者,欢迎更好的答案。