5

d3.js の v3 では、geoJSON データを使用してマップを描画する際に問題が発生しています。コードと結果のマップはhttp://bl.ocks.org/73833ec90a8a77b0e29fに示されています。この例では、d3.js の v2 を使用して正しいマップを生成します。

  1. 私のデータは既に投影されています (それらはオランダの National Grid/Rijksdriehoekstelsel 座標です)。これを補うために、マップの座標系をピクセルに変換するだけの独自の投影関数を作成しました (スケーリングと変換など)。
  2. d3.js の v3 の d3.geo.path() は、データをリサンプリングします。ただし、リサンプリングで生成されたポイントは、マップと同じ座標系にあるようには見えません (経度、緯度座標であると想定しています)。

マップは既に希望どおりに投影されているため、マップの座標を経度、緯度座標に変換したくないと思います。私が知る限り、これは自明な投影ではありません。

問題が本当にリサンプリングによって引き起こされている場合は、リサンプリングを無効にしたいと思います。ただし、ドキュメントでは、これを行う方法を実際に見つけることができませんでした。投影関数を d3.geo.path.projection() に渡す代わりに、ストリーミング オブジェクトを渡すことができます。私は次のことがうまくいくと思いました：

var projection = d3.geo.projection(function(x, y) {
    return [ scale*(x-xmin), height-scale*(y-ymin) ];
  }).precision(0);

しかし、そうではありません。おそらく、私が緯度経度座標を持っていないという事実にも関係しています。カスタム プロジェクション関数を使用してリサンプリングを無効にするにはどうすればよいですか?

または、他の何かが問題を引き起こしている場合は、それを聞きたいと思います。

ありがとう。

4

2 に答える 2

6

user603124 の回答に応えて、問題をもう一度調べました (今までは d3.js の v2 を使用していました)。オブジェクトを作成するという私の最初のアイデアは機能します。ただし、最初の実装では、スケーリングとズームが間違っていました。別の質問への回答を使用して、スケーリングとズームを正しく行います。

<script>
  var height = 400;
  var width  = 400;

  var vis = d3.select("#vis").append("svg")
      .attr("width", width).attr("height", height)

  d3.json("po_2012_simplified.json", function(json) {

      var projection = d3.geo.projection(function(x, y) { return [x, y];})
        .precision(0).scale(1).translate([0, 0]);

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

      var bounds = path.bounds(json),
          scale  = .95 / Math.max((bounds[1][0] - bounds[0][0]) / width, 
                  (bounds[1][1] - bounds[0][1]) / height),
          transl = [(width - scale * (bounds[1][0] + bounds[0][0])) / 2, 
                  (height - scale * (bounds[1][1] + bounds[0][1])) / 2];

      projection.scale(scale).translate(transl);

      vis.selectAll("path").data(json.features).enter().append("path")
        .attr("d", path)
        .style("fill", "#D0D0D0")
        .style("stroke-width", "0.5px")
        .style("stroke", "black")
    });

</script>

完全に機能するソリューションについては、http://bl.ocks.org/djvanderlaan/5336035を参照してください。

于 2013-04-08T11:33:57.390 に答える