如何在d3 AlbersUSA投影中移動狀態？

Question

我在d3中使用標準的AlbersUSA投影。

但我遇到的一件事是，由於阿拉斯加和波多黎各超出了連續狀態繪製的「矩形」，我無法使我的縮放因子最大化，以適應更小的視口。

理想情況下，我想將波多黎各移動到路易斯安那州以下，並可能與夏威夷和阿拉斯加交換位置，這將給我帶來更好的工作環境。

展望的文件過來，我看到AlbersUSA複合材料用下面的函數創建：

function albersUsa(coordinates) { 
    var lon = coordinates[0], 
     lat = coordinates[1]; 
    return (lat > 50 ? alaska 
     : lon < -140 ? hawaii 
     : lat < 21 ? puertoRico 
     : lower48)(coordinates); 
} 

我怎麼能修改此功能（或有效地創建自己的），這樣我可以移動的狀態，而無需不必擔心增加GeoJSON數據本身？

Answer 1

（I沒有試過）

1. 複製爲d3.geo.albersUsa代碼出D3源的（代碼包含在該柱的底部）。

2. 修改名稱：d3.geo.myAlbersUsa = function() { ... }

3. 查找功能albersUsa.translate內。這就是3個州被移到他們的「人造」位置的地方。例如：alaska.translate([dx - 400 * dz, dy + 170 * dz]);

4. 調整這些數字（400和170），直到它移動到您想要的位置（以小的變化開始，如+/- 10）。

5. 對於您正在繪製數據到任何路徑，你需要指定其投影爲您的自定義投影：path.projection(d3.geo.myAlbersUsa())

從D3源，這是你需要複製的代碼/在步驟1中粘貼：

// A composite projection for the United States, 960x500. The set of standard 
// parallels for each region comes from USGS, which is published here: 
// http://egsc.usgs.gov/isb/pubs/MapProjections/projections.html#albers 
// TODO allow the composite projection to be rescaled? 
d3.geo.albersUsa = function() { 
    var lower48 = d3.geo.albers(); 

    var alaska = d3.geo.albers() 
     .origin([-160, 60]) 
     .parallels([55, 65]); 

    var hawaii = d3.geo.albers() 
     .origin([-160, 20]) 
     .parallels([8, 18]); 

    var puertoRico = d3.geo.albers() 
     .origin([-60, 10]) 
     .parallels([8, 18]); 

    function albersUsa(coordinates) { 
    var lon = coordinates[0], 
     lat = coordinates[1]; 
    return (lat > 50 ? alaska 
     : lon < -140 ? hawaii 
     : lat < 21 ? puertoRico 
     : lower48)(coordinates); 
    } 

    albersUsa.scale = function(x) { 
    if (!arguments.length) return lower48.scale(); 
    lower48.scale(x); 
    alaska.scale(x * .6); 
    hawaii.scale(x); 
    puertoRico.scale(x * 1.5); 
    return albersUsa.translate(lower48.translate()); 
    }; 

    albersUsa.translate = function(x) { 
    if (!arguments.length) return lower48.translate(); 
    var dz = lower48.scale()/1000, 
     dx = x[0], 
     dy = x[1]; 
    lower48.translate(x); 
    alaska.translate([dx - 400 * dz, dy + 170 * dz]); 
    hawaii.translate([dx - 190 * dz, dy + 200 * dz]); 
    puertoRico.translate([dx + 580 * dz, dy + 430 * dz]); 
    return albersUsa; 
    }; 

    return albersUsa.scale(lower48.scale()); 
};