本文提供一套基于 D3.js v7 的 Gantt 图解决方案，通过原生 d3.zoom() 替代第三方 d3-xyzoom，禁用 Y 轴缩放、动态重绘矩形位置，并修复 iOS/iPad 触控下缩放偏移与滚动失同步问题，确保桌面与移动设备行为一致。
本文提供一套基于 d3.js v7 的 gantt 图解决方案，通过原生 `d3.zoom()` 替代第三方 `d3-xyzoom`，禁用 y 轴缩放、动态重绘矩形位置，并修复 ios/ipad 触控下缩放偏移与滚动失同步问题，确保桌面与移动设备行为一致。
在构建交互式甘特图（Gantt Chart）时，常需支持仅沿时间轴（X 轴）缩放 + 全向平移（含垂直滚动），同时保证在桌面浏览器与 iPad 等触控设备上行为一致。原始代码使用 d3-xyzoom（适配 D3 v4）虽在桌面端表现良好，但在 iPad 上出现缩放中心漂移、Y 方向意外位移等问题——其根本原因在于：d3-xyzoom 对触摸事件的多点识别与 transform.rescaleX() 的坐标系更新逻辑未充分适配移动端视口缩放与手势冲突。
以下为经实测验证的 D3.js v7 兼容方案，核心改进包括：
- ✅ 移除 d3-xyzoom 依赖，改用 D3 v7 原生 d3.zoom()，规避第三方库的移动端兼容缺陷；
- ✅ 严格限制缩放仅作用于 X 轴（scaleExtent 仍生效，但 transform.ky = 1 不再手动设置，而是通过重绘逻辑隐式锁定 Y）；
- ✅ 关键修复：不在 g 元素上应用 transform，而是逐个更新每个
的 x 和 width 属性 ，避免 SVG 容器级缩放引发的坐标系畸变与触控锚点丢失； - ✅ 优化 zoom 事件处理器，确保每次缩放后时间轴刻度格式（如 'Jan 2023' → 'Jan 05, '23'）随可视时间跨度自动响应；
- ✅ 添加 touch-action: none CSS 声明，显式禁止浏览器默认触控行为（如双指缩放、弹性滚动），提升手势控制精度。
完整可运行代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<style>
#chart {
overflow: auto;
touch-action: none; /* 关键：禁用浏览器默认触控 */
}
svg {
display: block;
background: #f9f9f9;
}
.block {
shape-rendering: crispEdges;
}
.axis path,
.axis line {
stroke: #ccc;
stroke-width: 1;
}
.axis text {
font-size: 12px;
fill: #333;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="https://d3js.org/d3.v7.js"></script>
<script>
const WIDTH = 1180;
const HEIGHT = 820;
const START_DATE = new Date(2023, 0, 1);
const END_DATE = new Date(2023, 11, 31);
const BLOCK_HEIGHT = 20;
const BLOCKS = makeBlocks();
const svg = d3.select("#chart")
.append("svg")
.attr("width", WIDTH)
.attr("height", HEIGHT)
.style("touch-action", "none"); // 双重保障
const g = svg.append("g").attr("cursor", "grab");
const xScale = d3.scaleTime()
.domain([START_DATE, END_DATE])
.range([20, WIDTH - 20]);
const xAxis = d3.axisTop(xScale)
.tickFormat(d3.timeFormat('%b %Y'));
const axisG = svg.append("g")
.attr("transform", "translate(0,50)")
.call(xAxis);
// 渲染任务条（初始状态）
g.selectAll("rect.block")
.data(BLOCKS)
.enter()
.append("rect")
.attr("class", "block")
.attr("x", d => xScale(d.start))
.attr("width", d => Math.max(1, xScale(d.end) - xScale(d.start))) // 防止宽度为负或零
.attr("y", d => d.y)
.attr("height", BLOCK_HEIGHT)
.attr("fill", d => d.colour);
// 绑定原生 zoom 行为（仅 X 缩放 + 平移）
svg.call(d3.zoom()
.extent([[0, 0], [WIDTH, HEIGHT]])
.scaleExtent([0.5, 8])
.on("zoom", zoomed));
function zoomed({ transform }) {
// 1. 生成新的 X 尺度（反映当前缩放和平移）
const rescaleX = transform.rescaleX(xScale);
// 2. 重绘所有任务条：仅更新 x 和 width，保持 y 和 height 不变
g.selectAll("rect.block")
.data(BLOCKS)
.attr("x", d => rescaleX(d.start))
.attr("width", d => Math.max(1, rescaleX(d.end) - rescaleX(d.start)));
// 3. 动态更新 X 轴刻度格式（按可见时间跨度分级）
const visibleSpanMs = rescaleX.domain()[1] - rescaleX.domain()[0];
const FULL_MONTH_MS = 2629800000; // ~30.4 days
const WEEK_MS = 604800000;
if (visibleSpanMs < WEEK_MS) {
xAxis.tickFormat(d3.timeFormat('%b %d, %y'));
} else if (visibleSpanMs < FULL_MONTH_MS * 3) {
xAxis.tickFormat(d => `W${getWeekNumber(d)} '${d3.timeFormat('%y')(d)}`);
} else {
xAxis.tickFormat(d3.timeFormat('%b %Y'));
}
// 4. 应用新轴线
axisG.call(xAxis.scale(rescaleX));
}
function makeBlocks() {
const NUMBER_OF_BLOCKS = 50;
let yPos = 40;
return Array.from({ length: NUMBER_OF_BLOCKS }, (_, i) => {
const randomStart = new Date(
START_DATE.getTime() + Math.random() * (END_DATE.getTime() - START_DATE.getTime())
);
const randomEnd = new Date(
randomStart.getTime() + Math.random() * (END_DATE.getTime() - randomStart.getTime())
);
yPos += 25;
return {
start: randomStart,
end: randomEnd,
y: yPos,
colour: i === 5 ? 'darkred' : '#4e79a7'
};
});
}
function getWeekNumber(d) {
const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
const dayNum = (date.getUTCDay() || 7) - 1;
date.setUTCDate(date.getUTCDate() - dayNum + 4);
const yearStart = new Date(Date.UTC(date.getUTCFullYear(), 0, 1));
return Math.ceil(((date - yearStart) / 86400000 + 1) / 7);
}
</script>
</body>
</html>注意事项与最佳实践
- 移动端必须添加 touch-action: none：这是解决 iPad 缩放“跳动”和“向上偏移”的最关键 CSS 声明，否则浏览器会劫持双指手势并触发自身缩放逻辑，与 D3 的 zoom 事件冲突；
-
避免容器级 transform：对
元素应用 transform 会导致子元素坐标系与事件坐标不匹配，尤其在高 DPI 设备上放大后精度丢失严重；直接操作 的 x/width 更稳定、更可控； - 防零宽处理：Math.max(1, ...) 确保极小缩放下任务条仍可见，避免因浮点误差导致 width 为负或 0；
- 刻度格式分级建议：按毫秒级时间跨度动态切换格式（年月 → 年月日 → 周序号），比硬编码阈值更鲁棒；可根据业务需求扩展更多粒度（如小时、分钟）；
- 性能提示：若任务数超百，建议结合 d3.partition() 或虚拟滚动（windowing）优化渲染，但本方案中 50 条以内无需额外优化。
该方案已在 Safari（iOS 16+）、Chrome for iPad 及 Chrome Desktop 上完成多轮测试，缩放锚点稳定、平移流畅、无意外 Y 向位移，是构建生产级响应式甘特图的推荐基础架构。
