需求陈述：

画出了一张节点链接图，虽然可以固定布局中心，但每次使用不同屏幕时，这个布局中心总是会改变，导致节点链接图无法位于画布中央，且大小不适宜，因此需要实现一个自适应放缩方法，使画布按照屏幕的尺寸进行放缩，并将元素居中展示。

这是一个画布的嵌套方式。

只要理解了最后一步，就理解了这整个流程。为什么要把 d3.zoom() 绑定在外部的 <svg> 标签上呢？我们需要设想一个场景：假设我们把zoom事件绑定在了内部的 <g> 标签上，那么当用户将标签全部拖动到外部时，就没办法拖回来了。因为此时用户鼠标已经无法选中标签了。比如下面这种情况：

因此，为了避免用户将画布拖走后无法拖回来，我们应该设置一个“静止”的窗口，将拖动和放缩事件绑定在这上面，并且将这个事件作用来这个静止窗口内部的元素上。这里的静止窗口就是 <svg> ,而事件作用的元素就是 <g> ，这也解释了为什么要选用这种嵌套的形式。

理解了这点，代码就很好写了。我们只需要向放缩的函数中传入外部的id，内部的id， zoomObj 即可。这里还可以传入 padding ，和 duration ，设置画布的左右间隙和补间动效。

设置用户摁下 ctrl 键，就自适应放缩并居中

const zoomObj = d3.zoom().scaleExtent([1 / 50, 2]);
document.onkeydown = (e) => {
  if (e.keyCode === 17) {
    autoZoom(
      zoomObj,//传入zoomObj
      'svgContainer',//<svg>的id
      'svg',//<g>的id
        row: 20,
        col: 10
      },//间隙参数（自定）
      1000 // 补间时长（自定）
autoZoom()函数实现
//autoZoom() function body
  @param zoomObj: 放缩对象，设置了放缩比率
  @param svgContainerId: 容器 <svg>
  @param svgBodyId: 画布 <g>
  @param marginParam: 间隙参数（自定义）
  @param duration: 补间时长
const autoZoom = (zoomObj, svgContainerId, svgBodyId, marginParam, duration) => {
  const svgContainer = document.querySelector(`#${svgContainerId}`);
  const svgBody = d3.select(`#${svgBodyId}`);
  if (!svgContainer) {
    return;
  const viewBox = svgBody.node().getBBox();//必须用d3.select,才有getBox，获取到长和宽
  //svg（它是静止的）
  const containerWidth = svgContainer.clientWidth//svg标签的宽
  const containerHeight = svgContainer.clientHeight//svg标签的高
  // margin setting
  const rowMargin = marginParam.row
  const colMargin = marginParam.col
  //计算放缩倍数
  const scale = Math.min((containerWidth - rowMargin) / viewBox.width, (containerHeight - colMargin) / viewBox.height)
  //计算如果要居中，画布需要的偏移量
  const offsetX = (containerWidth - rowMargin) / 2 - (viewBox.x + viewBox.width / 2) * scale
  const offsetY = (containerHeight - colMargin) / 2 - (viewBox.y + viewBox.height / 2) * scale
  // d3.zoomIdentity:缩放参数，返回Transform{k:1,x:0,y:0}
  const t = d3.zoomIdentity.translate(offsetX + rowMargin / 2, offsetY).scale(scale)
  //计算完毕得到放缩参数t，<svg>标签调用zoomObj和计算好的t
  d3.select(`#${svgContainerId}`).transition().duration(duration).call(zoomObj.transform, t)
复制代码