D3.js：为具有多个 geoJSON 文件的地图设置 fitExtent 或 fitSize
我想绘制数据来自单个 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()。？非常感谢您的帮助，我尝试了几天但没有成功。
慕标琳琳1回答
随时随地看视频慕课网APP
相关分类
JavaScript