您好,我正在尝试创建伯明翰市的 map ,但我可以看到路径已经生成并且正在加载数据。我在 html 页面上没有看到任何内容。
我见过有人在不设置中心或翻译的情况下使用投影功能,它会显示他们的 map ,但这对我不起作用。
我研究了可能的解决方案,发现将您的投影以您感兴趣的城市为中心应该有助于让 map 正确显示,但这并没有帮助。我也试过玩秤,但这也无济于事。
基本上我的预期结果是一张伯明翰 map 显示在我的 svg 对象中间。
var w= 1400;
var h = 700;
var svg = d3.select("body").append("svg").attr("width",w).attr("height",h );
var projection = d3.geoMercator().translate([w/2, h/2]).scale(100).center([1.8904,52.4862]);
var path = d3.geoPath().projection(projection);
var ukmap = d3.json("https://martinjc.github.io/UK-GeoJSON/json/eng/wpc_by_lad/topo_E08000025.json");
// draw map
Promise.all([ukmap]).then(function(values){
var map = topojson.feature(values[0],values[0].objects.E08000025).features
console.log(map);
svg.selectAll("path")
.data(map)
.enter()
.append("path")
.attr("class","continent")
.attr("d", path)
.style("fill", "#f0e4dd") //steelblue
});
```
最佳答案
看起来路径在你的 svg 中间:
它真的很小。
使用 100 的 d3 墨卡托投影比例,您将在 100 个像素上显示 360 度经度。因此,对于 1400 像素的 svg,您可以显示 14 个地球。不适合一个城市。如果您将比例值提高到 10000,您至少会看到您的特征,但它不是很居中并且仍然很小,请尝试中心值和比例值,如下所示:
.center([-1.9025,52.4862])
.scale(100000)
(保持翻译不变)
现在我们到了某个地方:
但这仍然很乏味,我们可以简单地使用 projection.fitExtent 或 projection.fitSize 来自动缩放:
Promise.all([ukmap]).then(function(values){
var map = topojson.feature(values[0],values[0].objects.E08000025)
projection.fitSize([w,h],map);
var features = map.features;
svg.selectAll("path")
.data(features)
.enter()
...
这会拉伸(stretch)特征以填充指定的维度(它需要一个 geojson 对象,而不是数组,因此我进行了轻微的重组)。我们还可以像这样指定边距:
projection.fitExtent([[100,100],[w-100,h-100]],map);
这在 map 周围提供了 100 像素的边距,因此它不会触及 SVG 的边缘。
这两种方法,fitSize 和 fitExtent,都会自动设置投影平移和缩放,所以我们实际上可以跳过手动设置缩放、居中和平移(平移和缩放本质上做同样的事情:一个在投影之后,一个在投影之前,分别。虽然手动设置投影参数时,通常更容易使用两者)
关于javascript - D3 map 投影不显示 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58255440/