缩放时将d3贴图保留在div内

Question

我有一个用d3渲染的SVG地图，我插入了一个可以缩放的功能。但是当我这样做时，地图会覆盖页面的其他元素。基本上，我想将地图保留在其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

当缩放地图地图大小增加并从容器中映射溢出时，您可以通过overflow: hidden;属性隐藏溢出内容以映射这样的容器
的 CSS：

.map-container {
    overflow: hidden;
}

<强> HTML

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