如何控制 d3 scaleTime 的日期格式并删除不需要的时钟时间刻度？
How can I control the date format for d3 scaleTime and remove unwanted clock time ticks?
我正在尝试在面积图中显示一周的数据，并想使用 scaleTime() 填充我的 x 轴。我已将日期字符串转换为日期对象，并且域看起来是正确的，但我无法让 x 轴显示我想要的格式。我想看到的是显示日、月和年的 7 个刻度线。相反，我看到的是星期几和日期，并且还有显示“下午 12 点”的其他刻度线，如附图所示。
我已经尝试指定刻度线的数量，但它变得更加奇怪，尤其是在月份转换时，并且可能会显示类似 'Mon 29, Tues 30, Wed 31, November, Fri 2'.
的内容
最重要的是，我在实施比例尺时是否遗漏了什么？如果没有，我该如何微调刻度线以仅显示我想看到的内容？我找到的示例似乎 运行 与我遇到的问题不同。
我的日期对象的当前格式：“2020-07-22T06:00:00.000Z”
代码：
let x = d3.scaleTime().range([0, width-margin.right-margin.left])
let y = d3.scaleLinear().range([height-margin.bottom, margin.top])
x.domain([d3.min(area_data, d => d.date), d3.max(area_data, d=>d.date)])
y.domain([0, max_cases])
let xAxis = d3.axisBottom(x);
let yAxis = d3.axisLeft(y);
提前致谢。
你可以这样做
const xAxis = d3.axisBottom(x)
.ticks(d3.timeDay.every(1), '%-d %b %Y');
ticks says that you want one tick for each day. The second argument is a format specifier 的第一个参数定义了如何将日期格式化为字符串。 '%-d %b %Y' 显示没有填充的日期、缩写的月份名称和完整的年份。例如，2021 年 11 月 22 日。您可以根据需要修改它以获得所需的格式。
我正在尝试在面积图中显示一周的数据，并想使用 scaleTime() 填充我的 x 轴。我已将日期字符串转换为日期对象，并且域看起来是正确的，但我无法让 x 轴显示我想要的格式。我想看到的是显示日、月和年的 7 个刻度线。相反，我看到的是星期几和日期，并且还有显示“下午 12 点”的其他刻度线，如附图所示。
我已经尝试指定刻度线的数量，但它变得更加奇怪，尤其是在月份转换时，并且可能会显示类似 'Mon 29, Tues 30, Wed 31, November, Fri 2'.
的内容最重要的是，我在实施比例尺时是否遗漏了什么？如果没有，我该如何微调刻度线以仅显示我想看到的内容？我找到的示例似乎 运行 与我遇到的问题不同。
我的日期对象的当前格式：“2020-07-22T06:00:00.000Z”
代码：
let x = d3.scaleTime().range([0, width-margin.right-margin.left])
let y = d3.scaleLinear().range([height-margin.bottom, margin.top])
x.domain([d3.min(area_data, d => d.date), d3.max(area_data, d=>d.date)])
y.domain([0, max_cases])
let xAxis = d3.axisBottom(x);
let yAxis = d3.axisLeft(y);
提前致谢。
你可以这样做
const xAxis = d3.axisBottom(x)
.ticks(d3.timeDay.every(1), '%-d %b %Y');
ticks says that you want one tick for each day. The second argument is a format specifier 的第一个参数定义了如何将日期格式化为字符串。 '%-d %b %Y' 显示没有填充的日期、缩写的月份名称和完整的年份。例如，2021 年 11 月 22 日。您可以根据需要修改它以获得所需的格式。