我正在嘗試使用 Bootstrap 5.0 流體容器創建一個網頁模板（一個標題和一個容器，可以調整以便從不需要垂直滾動。在這個容器內部，我想在一個 svg 中呈現一個 D3 地圖，該地圖將動態縮放到其父容器高度的 100%（無論其父容器當前的高度是多少），并相應地調整其寬度以保持縱橫比。
我找到了一些樣式，可以讓我的容器始終縮放到剩余的視口高度，而無需垂直滾動，如下所示，但我不知道如何實體化我的 svg 以僅占用這個垂直空間、水平縮放和調整大小。
let path = d3.geoPath()
let svg = d3.select("#map-svg")
.attr("preserveAspectRatio", "xMidYMid meet")
.attr("viewBox", "0 0 960 600")
d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json").then(
function(us) {
svg.selectAll("path.county")
.data(topojson.feature(us, us.objects.counties).features)
.join("path")
.attr("id", function(d) {
return d["id"]
})
.attr("class", "county")
.attr("fill", "#E7E7E8")
.attr("stroke", "#FFFFFF")
.attr("stroke-linejoin", "round")
.attr("stroke-width", "0.3")
.attr("d", path)
}
)* {
margin: 0;
padding: 0;
border: 0;
}
html,
body {
height: 100%;
}
#wrapper-div {
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
outline: 1px solid red;
}
#header-div {
background-color: lightblue;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
#map-div {
background-color: lightgreen;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#map-svg {
background-color: lightpink;
}<body>
<div class="container-fluid" id="wrapper-div">
<div class="container-fluid" id="header-div">
HEADER TEXT
</div>
<div class="container-fluid" id="map-div">
<svg id="map-svg"></svg>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<script src="./index.js"></script>
</body>uj5u.com熱心網友回復：
box-sizing將容器的屬性設定為 first 時更容易調整容器中的空間，border-box以確保容器在調整margin和時保持相同的高度和寬度padding。要使其水平縮放，只需添加width: 100%;到您的#map-svg. 為了讓它保持在 100 視口而不會溢位，我所做的是將 設定#wrapper-div為具有heightof 100vh，header設定絕對值并將其設定為height與#map-svg'#wrapper-div高度相同，還添加了一些填充以避免標題和地圖重疊. 檢查下面的代碼段供您參考：
let path = d3.geoPath()
let svg = d3.select("#map-svg")
.attr("preserveAspectRatio", "xMidYMid meet")
.attr("viewBox", "0 0 960 600")
d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json").then(
function(us) {
svg.selectAll("path.county")
.data(topojson.feature(us, us.objects.counties).features)
.join("path")
.attr("id", function(d) {
return d["id"]
})
.attr("class", "county")
.attr("fill", "#E7E7E8")
.attr("stroke", "#FFFFFF")
.attr("stroke-linejoin", "round")
.attr("stroke-width", "0.3")
.attr("d", path)
}
)* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
#wrapper-div {
height: 100vh;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
outline: 1px solid red;
}
#header-div {
background-color: lightblue;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
position: absolute;
width: 100%;
}
#map-div {
background-color: lightgreen;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#map-svg {
background-color: lightpink;
padding: 1.5rem 0 .5rem;
width: 100%;
height: 100vh;
}<body>
<div class="container-fluid" id="wrapper-div">
<div class="container-fluid" id="header-div">
HEADER TEXT
</div>
<div class="container-fluid" id="map-div">
<svg id="map-svg"></svg>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<script src="./index.js"></script>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/410803.html
標籤：
上一篇：元素和svg形狀之間的白線