使用d3 scaleTime实现多轴显示日和月、年

<script src="https://d3js.org/d3.v7.min.js"></script>

const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const startDate = new Date("2022-01-01");
const endDate = new Date("2022-12-31");
const width = 800;
const height = 400;

const xScale = d3.scaleTime()
  .domain([startDate, endDate])
  .range([0, width]);

const xAxis = d3.axisBottom(xScale);

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

const monthAxis = d3.axisBottom(xScale)
  .ticks(d3.timeMonth)
  .tickFormat(d3.timeFormat("%b"));

const yearAxis = d3.axisBottom(xScale)
  .ticks(d3.timeYear)
  .tickFormat(d3.timeFormat("%Y"));

svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(monthAxis);

svg.append("g")
  .attr("transform", "translate(0," + (height + 20) + ")")
  .call(yearAxis);