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