D3 v7 时间刻度平移与缩放：限定日期范围的教程

import * as d3 from 'd3';
import { ScaleTime } from 'd3';

// 1. 定义图表尺寸和边距
const margin = { top: 0, right: 20, bottom: 60, left: 20 };
const width = 800; // 图表宽度
const height = 100; // 图表高度

// 2. 定义时间轴的起始和结束日期（核心限制范围）
const domainStart = new Date('2022-01-10T00:00:01');
const domainEnd = new Date(); // 当前日期

// 3. 初始化时间比例尺 (xScale)
// 这个比例尺的 domain 应该覆盖整个允许的时间范围
const xScale: ScaleTime<number, number> = d3
  .scaleTime()
  .domain([domainStart, domainEnd]) // 初始 domain 设定为完整的日期范围
  .rangeRound([0, width]); // 映射到 SVG 的宽度

// 4. 配置 D3 缩放行为 (d3.zoom)
// 计算缩放的最小和最大比例
// zoomMin = 1 表示完全显示整个 domainStart 到 domainEnd 的范围
// zoomMax 的计算示例：如果希望最细能看到1分钟的范围，则为 (总时长 / 1分钟时长)
const totalDurationInMinutes = (domainEnd.getTime() - domainStart.getTime()) / (1000 * 60);
const zoomMin = 1; // 最小缩放比例，显示整个时间范围
const zoomMax = totalDurationInMinutes; // 最大缩放比例，例如可以缩放到显示1分钟的粒度

const zoom = d3.zoom<SVGSVGElement, unknown>()
  .scaleExtent([zoomMin, zoomMax]) // 设置缩放比例的范围
  .translateExtent([[0, 0], [width, height]]) // 设置平移的范围，防止内容移出可视区域
  .extent([[0, 0], [width, height]]) // 设置监听缩放事件的区域
  .on('zoom', ({ transform }) => {
    // 缩放事件触发时，更新轴的比例尺
    // transform.rescaleX(xScale) 会根据当前的缩放和位移状态，
    // 基于原始的 xScale 生成一个新的比例尺
    axis.scale(transform.rescaleX(xScale));
    axisG.call(axis); // 重新绘制轴
  });

// 5. 创建 SVG 容器并应用缩放行为
const svg = d3.select('#scale')
  .append('svg')
  .attr('width', width)
  .attr('height', height + margin.top + margin.bottom)
  .call(zoom); // 将 zoom 行为绑定到 SVG 元素

// 6. 创建底部时间轴
const axis = d3.axisBottom(xScale); // 初始轴使用完整的 xScale

const axisG = svg.append('g')
  .attr('class', 'x-axis')
  .attr('clip-path', 'url(#clip)') // 应用裁剪路径，防止轴线或标签超出图表区域
  .attr('transform', `translate(0,${height})`)
  .call(axis);

// 7. 添加裁剪路径定义
// 确保轴线和标签在平移时不会超出图表左右边界
svg.append('defs').append('clipPath')
  .attr('id', 'clip')
  .append('rect')
  .attr('width', width)
  .attr('height', height);

// 8. 设置初始的缩放和平移状态（可选）
// 例如，初始显示一个30分钟的窗口，并居中显示
const initialWindowDurationMinutes = 30;
const initialK = totalDurationInMinutes / initialWindowDurationMinutes; // 计算显示30分钟所需的缩放比例
const centerDate = xScale.invert(width / 2); // 获取当前视图的中心日期

// 应用初始缩放和平移
zoom.scaleTo(svg, initialK); // 缩放到显示30分钟的窗口
zoom.translateTo(svg, centerDate.getTime(), 0); // 将中心日期平移到视图中心