d3 v5树缩放，拖动和重置

Question

我正在使用d3版本5进行树布局。我需要在树上添加缩放，平移，拖动和重置。我使用了以下内容：

this.svg = d3.select(this.chartContainer.nativeElement).append("svg")
    .attr("width", this.width + this.margin.right + this.margin.left)
    .attr("height", this.height + this.margin.top + this.margin.bottom)
    .call(d3.zoom().on("zoom", ()=> {
      this.svg.attr("transform", d3.event.transform)
    }))
    .append("g")
    .attr("transform", "translate("
          + this.margin.left + "," + this.margin.top + ")");

我能够使用鼠标滚轮进行缩放，并将其拖放到树上。我无法用两根手指进行缩放。并在重置时，它返回到原始状态。但是当我单击任何地方时，树都移到了旧位置。我正在使用以下内容进行重置：

this.svg.transition().duration(750).attr("transform", d3.zoomIdentity.translate(this.margin.left, this.margin.top));