D3.js地图：如何旋转它？

问题描述：

我正在用d3.js制作一张菲律宾地图，出于一个奇怪的原因，地图看起来像左转，所以这个国家看起来并不怎么样。我试图修改projection.rotate字段，但似乎不是修正线。D3.js地图：如何旋转它？

 var width = 1060, 
     height = 860; 

    var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .style("overflow", "auto"); 

    d3.json("ph.json", function(error, ph) { 
     if (error) return console.error(error); 

     var subunits = topojson.feature(ph, ph.objects.ph_subunits); 

     var projection = d3.geo.albers(); 
     projection.rotate([-4 ,0]); 
     projection.scale(3000); 
     projection.center([122.427150, 12.499176]); 
     projection.parallels([10, 15]) 
     projection.translate([width/2, height/2]); 

     var path = d3.geo.path() 
      .projection(projection) 
      .pointRadius(2); 
     svg.append("path") 
     .datum(subunits) 
     .attr("d", path); 

    });

这是代码。

任何帮助将是伟大的！

谢谢！

答

如果您不知道潜在的转换，Albers预测会有点棘手。

这是默认亚尔勃斯投影与其平行设置为10和15 .parallels([10,15])，如在你的问题，和100的规模（旋转和中心将默认为[0,0]）：

这种形状是由于投影的圆锥形性质。如果选择了南部的相似点，那么凹面就会颠倒过来。更极端的纬度/纬度会导致更大的弯曲。选择的平行线应贯穿您感兴趣的区域，因为平行线附近的区域是失真最小的区域。

如果我们想要说的，专注于澳大利亚（我会保持平行线一样的图像上面演示的缘故）：

我们可以简单地使用的地理中心澳大利亚作为投影.projection.center([x,y])和规模的中心到适当的水平.projection.scale(1000)：

唯一的变化是澳大利亚更大，它仍然像在地图的角落和更小的地方一样被扭曲。它上下左右移动，然后放大，没有其他变化。

正如您的问题所猜测的那样，旋转是解决显示不在主要子午线附近的问题的解决方案。

如果我们使第一地图（其是相同于该第二映射）由100度经度.projection.rotate([100,0])的，我们得到：

世界已经纺出100度，和一个假想线垂直穿过地图中心与经度-100度或西经100度的子午线对齐。

如果我们感兴趣的领域是中美洲（为此，我们继续使用并继续使用这些平行线），那么下一步就是沿投影中心上下移动地图中心子午线。对于中美洲，这种转变可能是20度：.projection.center([0,20])。通过适当的规模，比方说1000的结果是这样的：

所以，菲律宾，使用您的中心坐标[122。427150，12.499176]和相似之处，一个理想的阿尔伯斯投影可能看起来像：

 projection.rotate([-122.427150,0]) 
       .center([0,12.499176]) 
       .scale(1200) 
       .parallels([10,15]);

这对我产生了：

D3.js地图：如何旋转它？

相关推荐