web-dev-qa-db-ja.com

D3と地図上のポイントをプロット

緯度と経度に基づいてD3ジオライブラリを使用して、地図上にいくつかのポイントをプロットしようとしています。ただし、これらの値を投影関数に渡すと、SVG画像の境界外の座標になります。私のコードは この例はドキュメントで提供されています に基づいています。

私は現在のコードを次の場所に投げました： http://bl.ocks.org/rpowelll/8312317

私のソースデータは、そのようにフォーマットされたオブジェクトの単純な配列です

var places = [
  {
    name: "Wollongong, Australia",
    location: {
      latitude: -34.42507,
      longitude: 150.89315
    }
  },
  {
    name: "Newcastle, Australia",
    location: {
      latitude: -32.92669,
      longitude: 151.77892
    }
  }
]

これに続いて、次のようにプレートカレ投影法を設定しました。

var width = 960,
height = 480

var projection = d3.geo.equirectangular()
    .scale(153)
    .translate([width / 2, height / 2])
    .precision(.1);

var path = d3.geo.path()
    .projection(projection)

そこから、リンクされた例と実質的に同じコードでマップを描画します。スクリプトの最後で、次のコードを使用してこのマップにポイントをプロットします。

svg.selectAll(".pin")
    .data(places)
  .enter().append("circle", ".pin")
    .attr("r", 5)
    .attr("transform", function(d) {
      return "translate(" + projection([
        d.location.latitude,
        d.location.longitude
      ]) + ")"
    })

ただし、このコードは、SVG要素の範囲外のポイントになります。私がここで間違っていることは明らかですか？

javascriptsvgd3.jsgeo
11
rpowell

コードに単純なタイプミスがあります。座標は（経度、緯度）として投影に渡される必要があり、その逆ではありません。このコードは正常に機能するはずです。

 svg.selectAll(".pin")
  .data(places)
  .enter().append("circle", ".pin")
  .attr("r", 5)
  .attr("transform", function(d) {
    return "translate(" + projection([
      d.location.longitude,
      d.location.latitude
    ]) + ")";
  });
18
Lars Kotthoff