使用d3.js放大元素组

Question

我有一个包含多个对象的svg。在选择复选框时，我想放大相应的对象。我来到类似下面的代码，但缩放和位置仍然不准确。有人能指出我是如何做到这一点的吗？

  d3.selectAll('g.active')
    .each(function(d, i) {

      var bounds = this.getBoundingClientRect();
        boundsLeft.push(bounds.left);
        boundsRight.push(bounds.right);
        boundsTop.push(bounds.top);
        boundsBottom.push(bounds.bottom);
      });

      var top = Math.min.apply(Math, boundsTop);
      var bottom = Math.max.apply(Math, boundsBottom) ;
      var right = Math.max.apply(Math, boundsRight) ;
      var left = Math.min.apply(Math, boundsLeft);

      var bounds = [[left, top], [right, bottom]],
      dx = bounds[1][0] - bounds[0][0],
      dy = bounds[1][1] - bounds[0][1],
      x = (bounds[0][0] + bounds[1][0]) / 2,
      y = (bounds[0][1] + bounds[1][1]) / 2,
      scale = Math.max(0.6, Math.min(8, 0.9 / Math.max(dx / width, dy / height))),

      translate = [(width / 2) - (scale * x), (height / 2) - (scale * y)];

      vis.transition()
        .duration(750)
        .call(zoom.translate([((dx * -scale) + (width / 2)), ((dy * -scale) + height / 2)]).scale(scale).event);