我想繪制數據來自單個 topoJSON 文件的多個國家/地區。帶有這些國家的地圖應位于屏幕中間(居中),并應設置適當的比例,使地圖填滿整個窗口。我已經嘗試過的:要獲得path.bounds(d)每個國家/地區的邊界框并分別使用每一側(頂部、左側、底部、右側)的最大值和最小值,并提供從path.centroid(d)到的平均中心projection.center()。這沒有用。應用projection.fitExtent([[x0,y0],[x1,y1]],geojsonObject)或projection.fitSize([width,height],geojsonObject)按照此解決方案中的建議。在這里,我無法按照描述創建 featureCollection 并使用它來創建地圖。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="https://d3js.org/topojson.v2.min.js"></script> <style type="text/css"> .svg-container { display: inline-block; position: relative; width: 100%; padding-bottom: 100%; vertical-align: top; overflow: hidden; } .svg-content { display: inline-block; position: absolute; margin: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div id="container" class="svg-container"> </div> <script type="text/javascript"> var width = 600; //for simplicity set to fixed value var height = 600; //for simplicity set to fixed value var projection = d3.geoMercator(); var path = d3.geoPath() .projection(projection); var svg = d3.select("#container").append("svg") .classed("svg-content", true) .attr("width", width) .attr("height", height);我認為應該可以通過 Andrew Reid 在這篇文章中提供的建議使用fitSize或來解決這個問題fitExtent。但是我無法將其應用于我的問題。這也是我解決問題的首選方式?;蛘?,是否可以用center()和解決這個問題scale()?我將如何確定我必須提供的坐標center()和值scale()。?非常感謝您的幫助,我嘗試了幾天但沒有成功。
D3.js:為具有多個 geoJSON 文件的地圖設置 fitExtent 或 fitSize
慕標琳琳
2021-06-22 17:05:37