CODEWITHSUNDEEP
cssd3.js
abaporu
abaporu

Reputation: 320

Keep d3 map inside div when zooming

I've a SVG map rendered with d3 and I've inserted a function to zoom that works. But when I do it the map goes over the others elements of the page. Basically, I would like to would like to keep the map inside the its div container (in the case below the one with class "col-sm-10").

My HTML code

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

Upvotes: 0

Views: 927

Answers (1)

Nidhi
Nidhi

Reputation: 1443

When you zoom map map size increases and map overflows from your container so you can hide overflow content by overflow: hidden; property to map container like this
CSS:

.map-container {
    overflow: hidden;
}

HTML:

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

Upvotes: 3

Related Questions