如何使图表元素间等间隔的X轴时间刻度独立于时间范围

// 假设我们有一个时间序列数据数组 data
const data = [
  { date: new Date('2023-01-01'), value: 10 },
  { date: new Date('2023-01-02'), value: 20 },
  // ...更多数据
];

// 设置图表的宽度和高度
const width = 800;
const height = 400;

// 创建SVG元素
const svg = d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height);

// 定义X轴比例尺
const x = d3.scaleTime()
  .domain(d3.extent(data, d => d.date))
  .range([0, width]);

// 定义Y轴比例尺
const y = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .range([height, 0]);

// 创建X轴
const xAxis = d3.axisBottom(x)
  .ticks(d3.timeDay.every(1)) // 设置时间刻度间隔为一天
  .tickFormat(d3.timeFormat('%Y-%m-%d')); // 设置时间格式

svg.append('g')
  .attr('transform', `translate(0, ${height})`)
  .call(xAxis);

// 创建Y轴
const yAxis = d3.axisLeft(y);
svg.append('g').call(yAxis);

// 绘制数据线
const line = d3.line()
  .x(d => x(d.date))
  .y(d => y(d.value));

svg.append('path')
  .datum(data)
  .attr('fill', 'none')
  .attr('stroke', 'steelblue')
  .attr('stroke-width', 1.5)
  .attr('d', line);