限制d3.js放大到容器

考慮以下結構：限制d3.js放大到容器

<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/

來源

2015-07-10 isapir

也許您問的是錯誤的問題？它似乎按預期工作。 – FirebladeDan

我試圖保持紅色框和藍色框之間的白色邊緣未被修改，並且只在藍色框內放大縮放，而不修改藍色框本身的大小。目前藍色框的大小被修改並且在擴展時消耗了邊距，這可能是預期的行爲，但不是我想要的結果。 – isapir

當你考慮它時，你試圖保持相同大小的'g'元素實際上沒有大小......它只是一個分組元素，所以它的尺寸由組中的對象決定。如果您查看[spec]（http://www.w3.org/TR/SVG/struct.html#Groups），它沒有'height'和'width'元素。 –

如果我是你，我寧願做第一個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");

來源

2015-07-10 12:51:04

謝謝。這似乎工作。 – isapir

限制d3.js放大到容器

回答

相關問題