selection.call(zoom.transform, d3.zoomIdentity);
selection.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
以上方法是基于一个新的缩放变换值 zoom transform 进行变换的，且不会受缩放限制 zoom.scaleExtent([extent]) 和 zoom.translateExtent([extent]) 的影响。如果希望基于已有的变换而进一步进行变换，并考虑缩放限制则可以使用 zoom.translateBy()、zoom.translateTo()、zoom.scaleBy() 或 zoom.scaleTo() 方法，可以将它们看作是 zoom.transform() 的简便方法。
zoom.translateBy(selection, x, y) 基于当前变换，对选择集的元素进一步执行平移操作，即进行的是相对变换。
💡 新的变换值通过原变化值求出：tx1=tx0+kx，ty1=ty0+ky（其中 tx0 和 ty0 是当前/原变换值，而 x 和 y 是平移变换相对于原值的增量，k 是缩放变换比例）
第一个参数 selection 可以是一个选择集，也可以是一个过渡对象。会对其中的元素执行变换操作。
第二、第三个参数 x 和 y 是相对于当前坐标（原变换）的平移变换增量值
💡 第二、第三个参数 x 和 y 也可以是一个返回平移增量值的函数，它会被选择集中的元素依次调用，并传递两个参数：
d 当前所遍历的元素所绑定的数据 datum
i 当前所遍历的元素在分组中的索引 index
而函数内的 this 指向当前所遍历的元素节点
zoom.translateTo(selection, x, y[, p]) 对选择集的元素执行平移操作，其变换的方向和距离是基于将点 [x, y] 平移到给定的点 p 处
💡 变换是基于两个参照点：tx=px−kx，ty=py−ky（其中 px 和 py 分别是参照点 p 的横纵坐标）
第一个参数 selection 可以是一个选择集，也可以是一个过渡对象。会对其中的元素执行变换操作。
第二、第三个参数 x 和 y 是需要一个点的坐标位置
第四个（可选）参数 p 是参照点，需要通过变换将点 [x, y] 移动到此处，点 p 默认是视图的中点
💡 第二、第三、四个参数 x、y 和 p 也可以是一个返回点的坐标位置的函数，它会被选择集中的元素依次调用，也是传递递两个参数。
zoom.scaleBy(selection, k[, p]) 对选择集的元素进行缩放操作，是基于当前的变换再进一步进行缩放的
💡 视图新的缩放比例是基于原有的缩放比例计算得出的：k1=k0k（其中 k0 是原缩放比例）
第一个参数 selection 可以是一个选择集，也可以是一个过渡对象。会对其中的元素执行变换操作。
第二个参数 k 是缩放比例的倍增量
第三个（可选）参数 p 是构建平滑的缩放过渡的参照点，默认为视图的中点，该参考点在缩放过程中会发生移动
💡 第二、第三个参数 k 和 p 也可以是一个返回相应值的函数，它会被选择集中的元素依次调用，也是传递递两个参数。
zoom.scaleTo(selection, k[, p]) 对选择集的元素进行缩放操作，并将缩放比例设置为 k
💡 视图新的缩放比例是传入的参数：k1=k
第一个参数 selection 可以是一个选择集，也可以是一个过渡对象。会对其中的元素执行变换操作。
第三个（可选）参数 p 是构建平滑的缩放过渡的参照点，默认为视图的中点，该参考点在缩放过程中不会发生移动
💡 第二、第三个参数 k 和 p 也可以是一个返回相应值的函数，它会被选择集中的元素依次调用，也是传递递两个参数。
在缩放时如果使用过渡动画，缩放器提供了相应的方法设置过渡动画的参数：
zoom.duration([duration]) 设置通过双击（鼠标双击或触屏设备的 double-tap）所触发的缩放，其过渡动画的持续时间。参数 duration 是数值，表示过渡动画的持续时间（单位为毫秒），如果传递一个非正数，则缩放立即生效而没有平滑的动效，默认值为 250
💡 如果希望禁用双击放大功能，可以将 dbclick 双击事件（事件具有名称 zoom)的回调函数设置为 null
selection
.call(zoom)
.on("dblclick.zoom", null);
zoom.interpolate([interpolate]) 设置缩放平移过渡动画的插值器。参数 interpolate 是一个返回插值器的函数（也成为插值器工厂函数 interpolation factory），默认值是 D3 内置的插值器 d3.interpolateZoom，实现平滑的过渡效果
💡 如果希望在两个视图「线性」过渡，则可以尝试使用 D3 的另一个内置的插值器 d3.interpolate
处理缩放事件
使用方法 zoom.on(typenames[, listener]) 监听缩放事件，并执行回调函数（一般是操作容器在视图中执行缩放平移 transform 变换）
第一个参数 typenames 是需要监听的缩放平移相关事件，D3 提供了 3 种刷选相关事件类型：
start 缩放开始时（如鼠标按下操作）所触发的事件
zoom 缩放过程中（如鼠标移动操作）所触发的事件
end 缩放结束时（如松开按键操作）所触发的事件
💡 可以在事件后添加名称 name 并用 . 分隔，如 zoom.on('zoom.foo', listener)，这样就可以为通过一个刷选事件类型添加多个不同的处理函数
💡 如果希望移除缩放相关事件的监听器，可以为将相应事件回调函数设置为 null
zoom.on(".", null);
第二个参数 listener 是事件处理函数，它会在相应的缩放类型事件触发时被调用，而且依次接收 2 个参数：
event 缩放事件对象，该对象会暴露一些关于当前缩放信息的属性：
event.target 当前触发缩放事件的缩放器
event.type 缩放事件的类型，可以是 start、zoom、end
event.transform 当前的缩放变换值，一般用于设置容器/元素的 CSS transform 样式属性，实现画面元素的移动缩放
event.sourceEvent 触发缩放的原始事件，如 mousemove 或 touchmove
d 当前调用缩放器的元素所绑定的数据 datum
而回调函数内的 this 指向当前的元素
- 2.3w
-
karl_hg
数据可视化
Vue.js
- 1130
-
songhn
数据可视化
Grafana
- 1632
-
Data_Adventure
d3.js
- 2081
-
Data_Adventure
d3.js
- 459
-
Benbinbin
数据可视化
d3.js
