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 projection = d3.geo.mercator（） .scale（300） .center（[0,90]）; // centerX，centerY

请帮忙。

Answer 1

你的topojson文件可能存在问题，如果你想测试一个投影，使用通用的世界topojson来查看你在哪里（有时通过向外扩展）永远不会受到伤害。然后，一旦您对此感到满意，请测试您想要使用的特定topojson。这样可以更轻松地验证topojson的数据质量，因为您可以排除投影问题。

墨卡托投影是一种常见的投影，看起来像：

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

对于您拥有的数据，大致为[26,-28]。你可以通过编程方式解决这个问题，但通常不难手工找到。

您指定的坐标.center([0,90])引用北极。东/西零度，北纬90度。如果您指定[26,-28]作为中心点，您将获得一张与上图非常相似的地图，仅以南非为中心。

缩放值会放大您的位置，较大的数字会等同于较大的要素。对于我来说，960px乘500px svg，1500的刻度对我来说非常好。再一次，这可以通过编程方式找到，但可能只是想要将其设置为您自己的美学赏心悦目。通过以上参数，我得到了：

那是：

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

但是，如果你正在处理更高的纬度，或者觉得南非这样的纬度变形太大会怎么样？好吧，我们也可以合并一个轮换。旋转可以在地图下移动地球，因此如果我们想要旋转地图以显示南部区域，我们会将正值应用于y值。轮换可以得到类似的结果：

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

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

（所有带有x，y分量的d3.projection参数都是这样的顺序：经度，纬度）。

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

1 个答案: