d3中的自定义多尺度时间格式

var data = [
  { date: "2022-01-01T00:00:00", value: 10 },
  { date: "2022-01-01T01:00:00", value: 20 },
  { date: "2022-01-01T02:00:00", value: 30 },
  { date: "2022-01-01T03:00:00", value: 40 },
  { date: "2022-01-01T04:00:00", value: 50 },
  { date: "2022-01-01T05:00:00", value: 60 },
  { date: "2022-01-01T06:00:00", value: 70 },
  { date: "2022-01-01T07:00:00", value: 80 },
  { date: "2022-01-01T08:00:00", value: 90 },
  { date: "2022-01-01T09:00:00", value: 100 },
  { date: "2022-01-01T10:00:00", value: 110 },
  { date: "2022-01-01T11:00:00", value: 120 },
  { date: "2022-01-01T12:00:00", value: 130 },
  { date: "2022-01-01T13:00:00", value: 140 },
  { date: "2022-01-01T14:00:00", value: 150 },
  { date: "2022-01-01T15:00:00", value: 160 },
  { date: "2022-01-01T16:00:00", value: 170 },
  { date: "2022-01-01T17:00:00", value: 180 },
  { date: "2022-01-01T18:00:00", value: 190 },
  { date: "2022-01-01T19:00:00", value: 200 },
  { date: "2022-01-01T20:00:00", value: 210 },
  { date: "2022-01-01T21:00:00", value: 220 },
  { date: "2022-01-01T22:00:00", value: 230 },
  { date: "2022-01-01T23:00:00", value: 240 }
];

var parseDate = d3.timeParse("%Y-%m-%dT%H:%M:%S");
var formatDate = d3.timeFormat("%H:%M");

data.forEach(function(d) {
  d.date = parseDate(d.date);
});

var xScale = d3.scaleTime()
  .domain(d3.extent(data, function(d) { return d.date; }))
  .range([0, 800]);

var xAxis = d3.axisBottom(xScale)
  .ticks(d3.timeHour, 2)
  .tickFormat(formatDate);

var svg = d3.select("body")
  .append("svg")
  .attr("width", 800)
  .attr("height", 400);

svg.append("g")
  .attr("transform", "translate(0, 200)")
  .call(xAxis);

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d) { return xScale(d.date); })
  .attr("y", 200)
  .attr("width", 20)
  .attr("height", function(d) { return d.value; });