Сброс атрибутов преобразования D3s

Question

После создания некоторых симуляций я собирался удалить преобразования при сбросе (где я могу изменить симуляцию). Таким образом, окно просмотра не выглядит в устаревшем месте.

Я вручную сбрасывал его, и это выглядело хорошо, но когда я выполнял перетаскивание или масштабирование, он возвращался на прежнее место. Я заметил, что проблема связана с сохранением свойств 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.

}

Answer 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);
}

Поэтому, когда Сброс вызывается с использованием матрицы идентификаторов для определения местоположения.