5

d3内で標準のAlbersUSAプロジェクションを使用しています。

しかし、私が遭遇していることの1つは、アラスカとプエルトリコが米国本土によって描かれた「長方形」の外側にあるため、ズーム率を最大化して小さなビューポートに収めることができないということです。

理想的には、プエルトリコをルイジアナの下に移動し、ハワイやアラスカと場所を入れ替える可能性があります。これにより、作業の範囲が広がります。

ドキュメントを見ると、AlbersUSAコンポジットが次の関数で作成されていることがわかります。

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

この関数を変更して（または効果的に独自の関数を作成して）、GeoJSONデータ自体の拡張を心配せずに状態を移動できるようにするにはどうすればよいですか？

4

1 に答える 1

1

（私はこれを試していません）

  1. d3ソースからのコードをコピーしますd3.geo.albersUsa（コードはこの投稿の下部に含まれています）。

  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());
};
于 2012-10-24T18:26:41.410 に答える