重置 D3s 变换属性答案

【问题标题】：Resetting D3s transform attributes重置 D3s 变换属性
【发布时间】：2020-01-08 21:52:04
【问题描述】：

创建一些模拟后，我将在重置时移除变换（我可以在其中更改模拟）。这样一来，视口就不会出现在陈旧的位置。

我手动重置它，它看起来不错，但是当我执行拖动或缩放时，它会跳回原来的位置。我注意到这个问题与正在维护的 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);
  }

鉴于这看起来与事件处理有关，来源：https://github.com/d3/d3-selection/blob/v1.4.1/README.md#handling-events 我的印象是我可以提交一个转换事件，但我真的没有看到任何提供正确信息的东西。

我的目标是创建一个用于执行此操作的 resetViewport 函数。

HTML：

<svg #svg>
  <g>
    <g *ngFor="let node of nodes"></g>
    <g *ngFor="let link of links"></g>
  </g>
</svg

代码：

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

}

【问题讨论】：

标签： javascript typescript d3.js

【解决方案1】：

我相信问题的答案将涉及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);
}

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

【讨论】：