如何使用d3 v4在svg容器上一起使用缩放和拖动？

Question

我能够缩放和拖动svg，但是在缩放和拖动的协调方面面临问题，即如果svg已经被缩放/拖动，则无法缩放/拖动。

HTML代码：

<svg width="100%" height="480" class="mySvg" id="svgid">

                                                  <rect *ngFor="let floorData of floorPlanData"  
                [attr.x]="floorData.assetDto.assetLocationDto.col*10 +1" 
                [attr.y]="floorData.assetDto.assetLocationDto.row*10 +1" 
                [attr.height]="floorData.assetDto.assetLocationDto.height*10 -2" 
                [attr.width]="floorData.assetDto.assetLocationDto.width*10 -2"  
                [attr.id]="floorData.assetDto.assetId" 
                [attr.fill]="floorData.fill"
                style="stroke-width:0.4;stroke:grey;"></rect>        </svg>

TS代码：

    this.zoom = d3.zoom()
    .scaleExtent([0.5, 10])
      .translateExtent([[250, 250],[250, 250]])
    .on("zoom", function() {
      d3.select(this).attr("transform", function(){return 'scale(' + d3.event.transform.k + ')'})

    });

    this.drag = d3.drag().subject(this.subject) .on("drag", function(d) {
   d3.select(this).attr("transform", "translate(" + (d.x = d3.event.x) + "," + (d.y = d3.event.y) + ")");
});

    this.drag(d3.select('#svgid').datum({x: 0, y: 0}));

    d3.select('#svgid').call(this.zoom);

    d3.select('#svgid').style("transform-origin", "50% 50% 0");

  }
  subject() {var t = d3.select(this);return {x: t.attr("x"), y: t.attr("y")}; };