如何为南非 topojson 数据创建 D3.js 投影？

Question

我在这里有与 d3.js 一起使用的 topojson 数据： http://mazolosite.orionhub.org:8000/ZAF_adm3.json

我还创建了这个小提琴来演示我的问题，但是它似乎没有加载我的 topojson 数据： https://jsfiddle.net/gh583j5a/

这是我的代码，可以在本地解决缩放和正确居中问题。示例中的美国 topojson 似乎使用默认投影渲染得很好。

由于缺乏映射 API 的背景，我发现自己在缩放和投影方面遇到了困难。

    var width = 960,
  height = 500;

var path = d3.geo.path();

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);
debugger;
//var url = "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json"
var url = "http://mazolosite.orionhub.org:8000/ZAF_adm3.json";
d3.json(url, function(error, topology) {

  if (error) throw error;

  //var featureCollection = topojson.feature(topology, topology.objects.counties);
  var featureCollection = topojson.feature(topology, topology.objects.collection);
  var bounds = d3.geo.bounds(featureCollection);

  var centerX = d3.sum(bounds, function(d) {
      return d[0];
    }) / 2,
    centerY = d3.sum(bounds, function(d) {
      return d[1];
    }) / 2;

  var projection = d3.geo.mercator()
    .scale(300)
    .center([0,90]);//centerX, centerY
  path.projection(projection);

  svg.selectAll("path")
    .data(featureCollection.features)
    .enter().append("path")
    .attr("d", path);
});

我的问题是理解 d3.js 的这一部分（缩放和中心）：

var 投影 = d3.geo.mercator() .scale(300) .center([0,90]);//centerX,centerY

请帮忙。

Answer 1

您的 topojson 文件可能存在问题，如果您要测试投影，使用通用世界 topojson 来查看您正在寻找的位置（有时通过横向扩展）永远不会有什么坏处。然后，一旦您对此感到满意，就可以测试您要使用的特定 topojson。这样可以更轻松地验证 topojson 的数据质量，因为您可以排除投影问题。

墨卡托投影是一种常见的投影，如下所示：

它极大地扭曲了极地地区的面积（格陵兰岛实际上比澳大利亚小得多）。 d3.geo.mercator 投影的 centering 属性将简单地平移到指定的坐标（平移而不是缩放）。在处理南非等低纬度地区时，这通常不会令人反感。 为了创建 d3.js 墨卡托投影，您需要知道感兴趣区域的中心坐标。

对于您拥有的数据，这大致是 [26,-28]。您可以通过编程方式解决此问题，但通常手动查找并不难。

您指定的坐标.center([0,90]) 参考北极。东/西 0 度和北 90 度。如果您将[26,-28] 指定为中心点，您将获得一张与上述地图非常相似的地图，只是以南非为中心。

比例值会放大你，更大的数字等于更大的功能。对于拥有 960 像素 x 500 像素 svg 的我来说，1500 的比例对我来说效果很好。同样，这可以通过编程方式找到，但您可能只是想将其设置为您自己的审美。有了上面我得到的参数：

那是：

.scale(1500)
.center([26,-28]);

但是，如果您处理的是高纬度地区，或者觉得在南非等纬度地区失真太大怎么办？好吧，我们也可以合并一个旋转。 Rotate 在地图下移动地球，因此如果我们想旋转地图以显示南部地区，我们将正值应用于 y 值。旋转可以得到类似的结果：

.scale(1500)
.rotate([-26,28])

差异相当微妙，屏幕截图可能无法很好地服务，并且可能更适用于高纬度地区。尽管如此，它还是展示了另一种设置投影参数的方法。

（所有带有 x,y 分量的 d3.projection 参数都按以下顺序排列：经度、纬度）。