它显示了整个世界的投影边界，但没有显示越南Map的中心。我将创建多个Map从humdata.org，并需要每个指定的国家Map在中心，但我似乎不能弄清楚。
下面是我一直在尝试的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vietnam</title>
<style>
html,
body {
margin: auto;
width: 100%;
padding: 0;
height: 100%;
overflow: hidden;
font-size: 12px;
font-weight: bold;
font-family: arial;
position: absolute;
display: flex;
align-items: center;
text-align: center
}
path {
stroke: orange;
stroke-width: 0.15vw;
fill: black;
}
svg {
display: block;
margin: 0 auto;
font-size: 2vw;
font-family: arial;
font-weight: bolder;
border: 0px solid white;
}
</style>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
</head>
<body>
<script type="text/javascript">
d3.json("https://gist.githubusercontent.com/teglouis27/3c2fe0d34a64c91d04695f24530aa423/raw/7e7a91530b34234043995cd923a1cbc61f4fd4c6/vietnamCountryBorders").then(function(bb) {
let width = 700,
height = 700;
// Calculate the center of the country
let center = d3.geoCentroid(bb);
// Set up the projection to use the center
let projection = d3.geoEqualEarth().center(center);
// Scale and translate the projection to fit within the width and height
projection.fitSize([width, height], bb);
let geoGenerator = d3.geoPath().projection(projection);
let bounds = geoGenerator.bounds(bb);
let svg = d3.select("body").append('svg').attr("preserveAspectRatio", "xMinYMin meet").attr("viewBox", "0 0 700 700").style("width", width).style("height", height);
svg.append('g').selectAll('path').data(bb.features).join('path').attr('d', geoGenerator).attr('fill', '#088').attr('stroke', '#000');
});
</script>
</body>
</html>我仍然不知道如何修复它。平移和缩放只是移动整个图像。我想我需要使用turtle.js中的船体，然后从原始json文件中减去它。但我现在正试图自己得到分数，这样我就可以应用它。
当我将文件导入到https://mapshaper.org/时，它准确地显示了我正在尝试做的事情。
1条答案
按热度按时间vom3gejh1#
d3.geoPath().projection()功能不会自动将Map居中，projection.fitSize([width, height], bb)只会缩放Map以适应指定的宽度和高度。要使Map居中，必须手动设置投影的中心。但在此之前，您需要计算geoJSON数据的中心。
下面是如何做到这一点：
在这个修改后的脚本中，我使用
d3.geoCentroid()函数计算国家边界的地理中心，然后使用这个中心设置投影。注意：
d3.geoCentroid()计算几何图形的地理中心，它可能不是形状的实际几何中心。但是，对于大多数用途来说，这已经足够接近了。请确保您的JSON数据正确且格式正确，否则上述脚本可能无法按预期工作。验证数据并在必要时使用console.log进行调试总是一个好主意。