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

我正在用d3.js建造一张菲律宾地图,由于一个奇怪的原因,地图看起来像是在左边旋转,所以这个国家看起来并不是真的如此.
我试图修改projection.rotate字段,但似乎不是校正线.

        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]和平行线,理想的Albers投影可能如下所示：

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

这对我来说产生了：

标签：topojson,javascript,d3-js,mapping
来源： https://codeday.me/bug/20190919/1812486.html