如何在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

（我没试过这个）

1. 复制 d3 源代码d3.geo.albersUsa（代码包含在本文底部）。

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

3. 查看函数内部albersUsa.translate。这就是这三个州移动到其“人为”位置的地方。例如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());
};