使用D3.js投影显示地图 [英] Displaying a map using D3.js projection
问题描述
我正在尝试使用D3.js和
该地图的重点是在Afrcia东海岸附近的 [0,0] 。这是d3中大多数投影的默认焦点。这也是为什么你在视口中看不到任何东西并且没有看到任何错误的原因。
如果你设置你的中心，说（在我的顶部）头） [80,25] 你将更加集中于印度：
var projection = d3.geoMercator（）
.center（[80,25]）
.translate（[w / 2，h / 2]）
.scale（800 ）;
有一些不同的方法可以使墨卡托地图居中，包括使用投影的旋转。同样，不同的地图投影可以使用不同的参数或方法居中。
使用您的代码进行此修改（ .center（ [80,25]））和一点点放大（ .scale（800））让我：
更精确的方法是找到印度的质心（在线）当然）作为中心点而不是我的猜测。
每当你看不到你想要的东西时，检查DOM是否被绘制（但是只在屏幕外）或缩小以查看您是否在错误的地方。
为什么地图投影时没有投影？因为lat long对被解释为svg上的像素位置，这就是为什么在没有为geoPath定义投影时地图很小的原因。
I'm trying to display India's map using D3.js and this geoJSON file. When I run the following HTML file in the browser, the map doesn't get generated, with no error on the console.
I suspect this has something to do with projection because when I remove the projection from the path variable, I do get a tiny map at the top of the svg. I tried Mercator, Albers and other projections but nothing seems to work.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>India</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 500;
var projection = d3.geoMercator()
.translate([w/2, h/2])
.scale(500);
//Define default path generator
var path = d3.geoPath()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var rectangle = svg.append("rect")
.attr("height", h).attr("width", w)
.attr("fill", "transparent")
.attr("stroke", "black")
.attr("stroke-width", 1);
//Load in GeoJSON data
d3.json("india.json", function(json) {
//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
});
</script>
</body>
</html>
When I use your code, changing only the geojson of India to a geojson of the world, I get this:
The map is focused at [0,0], off the east coast of Afrcia. This is the default focus point of most projections in d3. This is also why you don't see anything in your viewport and don't see any errors.
If you set your center, to say (off the top of my head) [80,25] you'll be much more centered on India:
var projection = d3.geoMercator()
.center([80,25])
.translate([w/2, h/2])
.scale(800);
There are different ways to center a Mercator map, including using a rotation of the projection. Likewise, different map projections may be centered using different parameters or methods.
Using your code with with this modification (.center([80,25])) and a little bit of zooming in (.scale(800)) gets me:
A more precise method would be to find the centroid of India (online certainly) as the centering point rather than my guestimate.
Whenever you can't see what you had hoped to, check the DOM to see if it was drawn (but is only off screen) or zoom out to see if you are looking at the wrong place.
Why would the map project without a projection? Because the lat long pairs are interpreted as pixel locations on the svg, which is why the map is tiny when you don't define a projection for the geoPath.
这篇关于使用D3.js投影显示地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
