如何停止重置d3图上的缩放缩放和平移从第一次单击？

Question

我已经实现了带有d3缩放元素的d3树形图。目前，我一直在尝试对缩放和平移进行重置。不幸的是，当我尝试实现重置时，它会重置缩放和平移，直到我单击图形。到那时，它可以回到我以前放大和平移的地方。

我尝试实现此堆栈溢出问题中的答案：How to reset Zoom in d3.js?，但该帖子的OP没有使用子组来更改转换。我想要一种永久重置d3图的缩放和平移的方法，但是我没有找到适合我的方案的资源。

  //Zoom function so I can reset it later
  let zoom = d3.zoom().on(`zoom`, function() {
    //This was to part of the solution to stop it from shifting on first 
    //click after initial graph creation
    svgZoom.attr(`transform`, d3.event.transform)
  })

  //The main zoom element, which calls the zoom function
  let svgZoom = d3
    .select(cfg.el)
    .append(`svg`)
    .attr(`viewBox`, `0 0 ${width} ${height}`)
    .attr(`width`, `75%`)
    .style(`max-height`, `${height}px`)
    .style(`margin-left`, `12.5%`)
    .style(`margin-top`, `${margin.top}`)
    .on(`contextmenu`, () => d3.event.preventDefault())
    .call(zoom)
    .on(`dblclick.zoom`, null)
    .append(`g`)

  //This piece of code translates the graph
  svg = svgZoom
    .append(`g`)
    .attr(`id`, `graph`)
    .attr(`transform`, `translate(` + width / 4 + `,0)`)

  //This I found this functionality on another Stack Overflow question, 
  //but it is not resetting to my base transition, and the reset only 
  //works until I click, then it goes back to where it was before.
  let resetZoomPan = () => {
    svgZoom.call(zoom.transform, d3.zoomIdentity)
  }

TLDR：我想在调用函数时重置图形的缩放和平移，但是当前它在第一次单击后恢复。