Javascript 重置D3s变换属性

在创建了一些模拟之后，我打算在重置时移除变换（在这里我可以更改模拟）。这样，视口就不会在过时的位置中查看

我手动重置它，它看起来不错，但当我进行拖动或缩放时，它会跳回原来的位置。我注意到问题与正在维护的d3.event.transform属性有关。我认为最好的做法是将属性重置回x:0，y:0，scale:1，但是我没有看到太多关于transform属性的内容

如何重置此设置

我所能做的最接近于：

const mySvg; // Native element
const g = d3.select(mySvg).select(":first-child"); // pointing to g, where the transform attribute is applied.
g.attr("transform", "")

这会重置它，只需片刻，直到出现一个勾号，或拖动或缩放，它会捕捉回d3.event.transform。这是如何重置的

//  This is my zoomable behavior i inject in TS
applyZoomableBehavior(svgElement, containerElement) {
    const svg = d3.select(svgElement),
      container = d3.select(containerElement),
      zoomed = () => {
        const trans = d3.event.transform;
        container.attr('transform', `translate(${trans.x}, ${trans.y}) scale(${trans.k})`);
      },
      zoom = d3.zoom().on('zoom', zoomed);
    svg.call(zoom);
  }

鉴于这似乎与事件处理有关，根据来源： 我的印象是，我可以提交一个事件进行转换，但我没有看到任何提供正确信息的东西

我的目标是创建一个resetViewport函数，它就是这样做的

HTML:

---

我相信这个问题的答案将涉及到d3.zoomIdentity

如果我想创建这个重置函数，它的定义很简单：

resetViewport(svgElement){
  const svg = d3.select(svgElement);//  svgElement is a nativeElement.

  // Need to update the current viewport.
  const g = svg.select(":first-child")
  g.attr('transform', 'translate(0,0) scale(1.0)');

  // The below resets the scale and positioning of the viewport for subsequent move / zoom calls.
  const zoom = d3.zoom();
  svg.call(zoom.transform, d3.zoomIdentity);
}

因此，当调用重置时，它使用单位矩阵来设置位置

resetViewport(svgElement){
  const g = d3.select(svgElement).select(":first-child");
  // `g` points to the outter g element, the child of svg.

}

resetViewport(svgElement){
  const svg = d3.select(svgElement);//  svgElement is a nativeElement.

  // Need to update the current viewport.
  const g = svg.select(":first-child")
  g.attr('transform', 'translate(0,0) scale(1.0)');

  // The below resets the scale and positioning of the viewport for subsequent move / zoom calls.
  const zoom = d3.zoom();
  svg.call(zoom.transform, d3.zoomIdentity);
}