D3.js Map：如何旋转它？ [英] D3.js Map: How to rotate it?

问题描述

我用d3.js建立菲律宾的地图，因为一个奇怪的原因，地图看起来像在左边旋转，所以国家看起来不是真的。
我试图修改projection.rotate字段，但似乎不是更正行。

  var width = 1060，
 height = 860; 
 
 var svg = d3.select（body）append（svg）
 .attr（width，width）
 .attr 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 / 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]）; 
  

对我来说：

I'm building a map of the Philippines with d3.js and for a strange reason the map looks like rotated on the left, so that the country doesn't look how it really is. I've tried to modify the projection.rotate field but doesn't seems like is the correction line.

        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);

    });

This is the code.

Any help would be great!

Thanks!

解决方案

Albers projections can be a bit tricky if you don't know the underlying transformations.

This is the default albers projection with its parallels set to 10 and 15 .parallels([10,15]), as in your question, and a scale of 100 (rotation and center will default to [0,0]):

This shape is due to the conical nature of the projection. If southern parallels are chosen, the concavity is reversed. More extreme latitudes/parallels will result in a greater bend. The parallels selected should run through your area of interest as the area near the parallels is where distortion is minimized.

If we wanted to say, focus on Australia (I'll keep the parallels the same as the image above for the sake of demonstration):

We could simply use the geographic center of Australia as the center of the projection .projection.center([x,y]) and scale to an appropriate level .projection.scale(1000):

The only change is that Australia is bigger, it is still as distorted as when it was in the corner of the map and smaller. It was shifted up/down and left/right and then magnified with no other transformations.

As your question surmises, rotation is the solution to the problem of showing areas not near the prime meridian.

If we rotate the first map (which is the same as the second map) by 100 degrees of longitude .projection.rotate([100,0]), we get:

The world has spun 100 degrees, and an imaginary line drawn vertically through the center of the map aligns with the meridian at -100 degrees of longitude or 100 degrees west.

If our area of interest is Central America (for which the parallels you used - and I have continued to use - will work for) then the next step is to shift the center of the map up and down along the projection's central meridian. For Central America, this shift might be 20 degrees : .projection.center([0,20]). With an appropriate scale, let's say 1000 the result will look like:

So, for the Philippines, using your center coordinate [122.427150, 12.499176] and parallels, an ideal Albers projection might look like:

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

Which for me yielded:

这篇关于D3.js Map：如何旋转它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！