限制d3.js缩放到容器

Question

考虑以下结构：

<svg width="720" height="560" style="outline: red;">
   <g width="640" height="480" transform="translate(40,40)" style="outline: blue;">
     <g class="container" width="640" height="480">
       <!-- more stuff here... !-->
     </g>
   </g>
</svg>

所以现在我们通过轮廓有两个正方形，外部一个红色，内部一个蓝色。

我在.container上添加了缩放行为，但是当它缩小时，它超出了g元素的范围，并覆盖了整个svg区域。

我试图限制缩放比例，以便将其限制在640x480区域，并且该范围之外的任何东西都将被隐藏，以使红色框和蓝色框之间的白色边距在缩放时保持不变。

当前，蓝色框的大小已修改，并且在展开时会消耗边距。

我该如何实现？ 参见http://jsfiddle.net/1cg16x02/2/

Answer 1

如果我是你，我宁愿使第一个g元素成为另一个svg元素，并向其中添加x和y属性，如下所示：

var g1 = svg.append("svg")
    .attr("x", margin.left)
    .attr("y", margin.top)

然后在CSS中，按类别选择外部容器以更改其轮廓：

.outline .svg-frame {
  outline: 1px solid red;
}

为了给内部的svg勾勒出轮廓，我将在添加容器之后在g1添加一个矩形：

g1.append("rect")
    .attr("width", innerWidth)
    .attr("height", innerHeight)
    .style("fill", "none")
    .style("stroke", "blue");