css - 缩放时将 d3 map 保留在 div 内

Question

我有一个用 d3 渲染的 SVG map ，我插入了一个可以缩放的功能。但是当我这样做时， map 会覆盖页面的其他元素。基本上，我想将 map 保存在它的 div 容器中(在下面的例子中，类为“col-sm-10”)。

我的 HTML 代码

<div class="col-sm-10">
<div id="map">
</div>
</div>   

D3JS

var svg = d3.select("#map")
.append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 900 500")
.classed("svg-content-responsive", true)
.call(d3.zoom()
.scaleExtent([1, 8])
.on("zoom", function () {
svg.attr("transform", d3.event.transform)    
}))
;

Answer 1

当您缩放 map 时， map 大小会增加并且 map 会从您的容器中溢出，因此您可以通过 overflow: hidden; 属性 overflow hidden 内容以像这样映射容器
CSS:

.map-container {
    overflow: hidden;
}

HTML:

<div class="col-sm-10 map-container">
    <div id="map">
    </div>
</div>