D3.js Карта: как повернуть его?

Question

Я строю карту Филиппин с 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); 

    }); 

Это код.

Любая помощь будет замечательной!

Спасибо!

Answer 1

Вычисления 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]); 

Который для меня уступил: