javascript - D3 map 投影不显示 map

Question

您好，我正在尝试创建伯明翰市的 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
    });
    ```

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()
      ...

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

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

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

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