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

Question

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

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

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

由于缺乏 map 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() .规模(300) .center([0,90]);//centerX,centerY

请帮忙。

Answer 1

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

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

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

这大约是您拥有的数据的[26,-28]。您可以通过编程来解决这个问题，但通常手动找到它并不难。

您指定的坐标.center([0,90])引用北极。东/西 0 度和北 90 度。如果您指定[26,-28]作为中心点，您将得到一张与上面的 map 非常相似的 map ，只是以南非为中心。

比例值会将您放大，数字越大，特征越大。对于 960px x 500px svg 的我来说，1500 的比例对我来说效果很好。同样，这可以通过编程方式找到，但您可能只想将其设置为您自己的审美愉悦。通过上述参数我得到:

那是:

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

但是，如果您处理的是较高纬度地区，或者感觉在南非等纬度地区失真太大怎么办？好吧，我们也可以加入轮换。旋转将地球移动到 map 下方，因此如果我们想要旋转 map 以显示南部区域，我们对 y 值应用正值。旋转可以得到类似的结果:

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

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

(所有具有 x、y 分量的 d3.projection 参数均按以下顺序排列:经度、纬度)。