【趟坑记录】d3.zoom()的正确使用姿势 @d3.v7

【趟坑记录】d3.zoom()的正确使用姿势 @d3.v7

在开发一个D3应用的时候遇到了一个 zoom相关的问题，记录解决思路与方案

问题重现

最近在开发一个D3应用的时候遇到了一个zoom相关的问题，应用里有一个功能叫全景聚焦。我们都知道画布由两个标签组成（见实现autoZoom(),画布自适应放缩并居中@D3.js-v5），最外层的是固定视口<svg>，一般将zoom事件绑定在<svg>上；内层是具体的画布，是一个<g>标签，在<svg>中的放缩与平移操作都作用在<g>上，修改<g>的transform属性。这么做是为了避免用户将<svg>元素拖动到窗口之外后丢失拖动焦点，无法将其拖回。而如果使<svg>不动，<g>被拖动，那么拖动焦点就不会丢失，用户将<g>元素移动至视口外后，还能将其拖回来。

我之前习惯这么写拖动平移：

const svg = d3.select('#viewport')
        .attr('width', width)
        .attr('height', height)
const g = svg.append('g')
        .attr('id', 'container')
        .attr('width', width)
        .attr('height', height)

svg.call(
  d3.zoom().on('zoom', (e) => {
   
    const transform =