d3.js - 如何在第二天创建一个包含从中午到中午的小时数的 y 轴

Question

如果有人可以帮助我制作需要构建的图表，我将不胜感激。它的垂直 (y) 轴必须包含从中午到第二天中午的时间。基本上它应该是这样的：

标签： d3.js

Answer 1

我想我明白了：

import { addDays } from 'date-fns';

...
const startOfDay = new Date();
startOfDay.setHours(12, 0, 0, 0);

const middleOfNextDay = addDays(new Date(), 1);
middleOfNextDay.setHours(14, 0, 0, 0);

const yScale = scaleTime()
  .domain([startOfDay, middleOfNextDay])
  .rangeRound([0, height]);

g.append('g')
  .attr('class', 'y axis')
  .call(axisLeft(yScale).tickFormat(timeFormat('%H:%M')).ticks(timeHour, 2));