缩放与平移 — 几何缩放、程序缩放与语义缩放Copy Anchor Link

这一篇讲什么: 第 14 章的另一半。缩放看似简单(套个 transform 而已), 但原书用三个递进的层次拆开:基础(transform 挂对层、加约束)、 程序(按钮/回放,行为方法驱动)、语义(缩放不只是变大变小—— 轴要跟、线宽要稳、细节要分级出现)。这三层也是真实项目里逐个踩过去的坑序。

1. 顶层全景:一个对象 {x, y, k} 贯穿全篇Copy Anchor Link

  用户手势(双击/滚轮/捏合/拖拽)        你的代码(按钮/回放/联动)
        │                                    │
        └──────────► d3.zoom() 行为 ◄────────┘
                        │ on('zoom', evt)
                        ▼
                 evt.transform = {x, y, k}
                   x,y:平移量  k:缩放倍率
                        │
        ┌───────────────┼───────────────────────┐
        ▼               ▼                       ▼
  挂到容器属性      重算比例尺(rescaleX/Y)    反算坐标(apply/invert)
  (几何缩放)       (轴跟着动的语义缩放)        (tooltip/加点对齐)

  图说:全部缩放语义浓缩成一个三元组;三种用法是它的三个消费方向。

2. 基础缩放:挂对层、加约束Copy Anchor Link

2.1 最小例子与一个坑Copy Anchor Link

  const zoom = d3.zoom().on('zoom', evt => {
    d3.select("svg").attr("transform", evt.transform);   // ← 坑在这
  });
  d3.select("svg").call(zoom);

直接 transform 整个 <svg> 会让视口本身跟着缩放——内容越界、边框变形。 正解:行为 call 在 svg 上(它监听事件),transform 却施加给内部一个 <g> 数据层¹:

  svg.call(d3.zoom().on('zoom', evt =>
    svg.select("g").attr("transform", evt.transform)));

2.2 容器层级:数据区 ≠ SVG 区Copy Anchor Link

带轴的图表里,轴要固定、只有绘图区缩放。原书的标准结构是四层:

  <svg>                 ← 监听 zoom 行为
    <g class="context"> ← 平移出边距
      <svg class="chart">  ← 固定尺寸的「数据视口」(必须是 <svg> 才能设宽高)
        <g class="container"> ← 真正吃 transform 的数据层

数据层外包一层固定尺寸的内嵌 <svg>,等于天然「剪辑窗口」——点缩放后越界即被裁掉。 等效替代:不给内层 <svg>,改用 <clipPath> 裁数据层(原书两案并列,效果相同)²。

2.3 三 extent 与事件过滤Copy Anchor Link

事件分流也在这层:filter(evt => !evt.shiftKey) 让 Shift 场景让给刷选; svg.on("dblclick.zoom", null) 直接拆掉某个内置监听(如双击缩放)³。

3. transform 对象:不可变的 {x, y, k}Copy Anchor Link

事件对象里的 transform(也可用 d3.zoomTransform(node) 随时取)是个不可变对象: {x, y, k} 默认恒等 {0, 0, 1}。塞进字符串上下文自动变 translate(x,y) scale(k)——所以 attr("transform", evt.transform) 一行就够⁴。

两个派生方法,顺序有讲究(先 translate 后 scale,反了平移量会被缩放)⁵:

  const trsf1 = new d3.ZoomTransform(2, 25, 10);   // {k:2, x:25, y:10}
  const trsf2 = trsf1.translate(50,50).scale(1.5);  // {k:3, x:75, y:60}
  // 还有现成常量 d3.zoomIdentity = {0,0,1}

别混淆:zoom.transform(行为的方法,往选择器上套变换)与 evt.transform (变换数据对象)是两个东西,只是名字撞车——原书专门加了 Important note⁶。

4. 程序缩放:行为方法驱动Copy Anchor Link

把「套变换」从事件里解放出来,就是按钮、回放、联动地图的玩法。 方法都走 selection.call(zoom.方法, …) 的形式⁷:

  // 重置按钮:过渡回恒等变换
  d3.select(".chart").transition().call(zoom.transform, d3.zoomIdentity);

  // 动画序列:链式 call
  d3.select(".chart").transition().delay(1000)
    .call(zoom.transform, trsf1).transition().delay(1000)
    .call(zoom.transform, trsf2)…

  // 三连放大再缩回:scaleBy 累积 ×2 ×2 ×0.25
  .call(zoom.scaleBy, 2).transition().call(zoom.scaleBy, 2).transition().call(zoom.scaleBy, .25)

两个细节:transform() 方法无视 scaleExtent,scaleBy/scaleTo 遵守; translateTo 移动的是「视野」而非「内容」——中心对准 (0,0) 等于内容往反方向走⁸。 程序缩放默认用 d3.interpolateZoom 平滑(平移中尺寸连续变化), 不想要可 interpolate(d3.interpolate) 换成线性⁹。

5. 语义缩放:缩放改变「看到的」,不只是「大小」Copy Anchor Link

5.1 几何 vs 语义Copy Anchor Link

container.attr("transform", evt.transform) 是几何缩放:一切跟着 k 变大变小—— 散点的 1px 点变成大圆,地图的细国界变粗矩形。语义缩放则让图保持可读、并按层级揭示细节: 放大地图时出现更多城市,放大星图时出现更多星¹⁰。

5.2 三件工具Copy Anchor Link

  ① 反缩放(保持视觉尺寸):一切想「不变粗」的量都除以 k
     function update() {
       d3.selectAll("circle").attr("r", 5/k).style("stroke-width", 1/k);
       d3.selectAll("text").style("font-size", 10/k);
       d3.selectAll("path.grid.major").style("stroke-width", 3/k);
     }
     .on('zoom', evt => { container.attr("transform", evt.transform); update(); });

  ② 重算比例尺(让轴跟着数据动)
     d3.select(".x-axis").call(xAxis.scale(evt.transform.rescaleX(xScale)));
     d3.select(".y-axis").call(yAxis.scale(evt.transform.rescaleY(yScale)));
     // rescaleX 返回一个「domain 已按当前变换调整」的比例尺副本,原尺不动

  ③ 点级取舍(按 k 决定画不画、画多大)
     function radius(d, k) {
       if (d.n * k > 1)  return 1/k + d.n * k/2000;  // 大点缓慢变大
       else if (d.n * k < 0.1) return 0;             // 太小不画,防糊
       else return d.n/k;                          // 中等点保持视觉大小
     }

①+③ 合起来的效果(原书 5 万点散点实验):缩放时点的屏幕尺寸稳定, 太密的点自动隐去,坐标轴数字随视野更新¹¹。

5.3 性能:Canvas + requestAnimationFrameCopy Anchor Link

5 万个圆点在 SVG 里做语义缩放会卡——DOM 太多。换成 Canvas 重绘后还有一个坑: zoom 事件触发得比屏幕刷新快,画不过来。原书的提速只有一行: requestAnimationFrame(() => paint())——把重绘对齐到浏览器的帧节奏¹²。

5.4 坐标换算:apply 与 invertCopy Anchor Link

transform 还提供单点换算:apply([x,y]) 把数据点投到缩放后的屏幕; invert([x,y]) 反向——缩放状态下要按点击位置加一个新点、或给悬停点摆 tooltip, 就得用它把屏幕坐标译回数据坐标¹³。

6. 作者的判断与证据Copy Anchor Link

7. 边界与局限Copy Anchor Link

• apply/invert 正文明说「not covered」,只有仓库示例¹³。
• interpolateZoom 的高级用法(视图间平滑飞行)同样只在 Extras。
• 触摸双指捏合的数学(两指中点、距离比)由行为内部处理,不拆。
• 语义缩放的「细节层级」策略(何时出现城市名)只有示例没有普适配方。

8. 可带走的Copy Anchor Link

1. zoom 的全部状态 = {x, y, k};行为挂外层、transform 施加内层数据 <g>;
2. 三层容器(svg → context → 内层 svg/clipPath → 数据层)是带轴缩放的标准结构;
3. scaleExtent 限倍率、translateExtent 限平移、filter 分流事件、xxx.zoom 拆内置监听;
4. transform 不可变:translate/scale 方法派生新对象,先 translate 后 scale;
5. 程序缩放四方法:transform/translateBy/translateTo/scaleBy/scaleTo,走 .call(zoom.方法, …);
6. scaleBy 相对、scaleTo 绝对;translateTo 移动的是视野(内容反向);
7. 语义缩放三件套:视觉尺寸 ÷k、rescaleX/Y 重算轴、按 k 分级取舍细节;
8. 大数据语义缩放:Canvas 重绘 + requestAnimationFrame 对齐帧率;
9. apply/invert 做缩放状态下的单点坐标换算(tooltip、加点)。

9. 原文地图Copy Anchor Link