D3 地图投影不显示地图

Question

您好，我正在尝试创建伯明翰市的地图，但我可以看到已生成路径并且正在加载数据。我在 html 页面上看不到任何内容。

我见过人们在没有设置中心或平移的情况下使用投影功能，它会显示他们的地图，但这对我不起作用。

我研究了可能的解决方案，发现以您感兴趣的城市为中心进行投影应该有助于使地图正确显示，但这并没有帮助。我也尝试过使用音阶，但这也无济于事。

基本上我的预期结果是一张伯明翰地图，显示在我的 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
    });
    ```

Answer 1

看起来路径在您的 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()
      ...

这会拉伸特征以填充指定的维度（它需要一个 geojson 对象，而不是数组，因此我进行了轻微的重组）。我们也可以像这样指定边距：

 projection.fitExtent([[100,100],[w-100,h-100]],map);

这会在地图周围提供 100 像素的边距，因此它不会触及 SVG 的边缘。

fitSize 和 fitExtent 这两种方法都会自动设置投影平移和缩放，因此我们实际上可以跳过手动设置缩放、中心和平移（平移和缩放本质上是做同样的事情：一个在投影之后，一个在之前, 分别。虽然手动设置投影参数时通常更容易使用两者）