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");

限制d3.js缩放到容器

1 个答案: