3

これが最初のtopojson質問です。マップ (NYC 区) のレンダリングに問題があり、その理由がわかりません。以下のコードは、別の topojson ファイルを使用したこの例の単なるコピーです。ここにファイルをアップロードしました。以下は、ファイルの作成方法に関する詳細でもあります。今、私は混沌とした線を取得しています。おそらくtopojsonファイルが原因だと思いますが、何が悪いのかわかりません。

ps:topojsonタグが以前に使用されていなかったため、これにタグを付けることができませんでした

TopoJSON ファイル

1)ここからシェープファイルをダウンロード

(「Borough & Community Districts」の下のファイル「Boroughs」(左)、ArcView Shapefile)

2) QGis でシェープファイルを単純化する

3) で TopoJSON に変換

ogr2ogr -f geoJSON nybb-geo.json nybb.shp
topojson -o nybb.json nybb-geo.json

HTML/JS コード

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.boundary {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>

var width = 960,
    height = 500;

var path = d3.geo.path();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("/geo/nybb.json", function(error, topology) {
  svg.append("path")
      .datum(topojson.object(topology, topology.objects['nybb-geo'].geometries[0]))
      .attr("d", path)
      .attr("class", "boundary");
});

</script>
4

1 に答える 1

6

ユーザー10579のコメントでも示唆されているように、シェイプファイルをNAD83（EPSG 4269）に再投影することで問題を解決できました。再投影されたシェープファイルから topojson ファイルを作成した後、d3.js はマップを次のように表示します。

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

私が遭遇した 2 番目の問題は、正しい中心、スケール、および移動の値に関連していました。上記のコードでは、nyc は多くの空白を含む小さなドットになります。正しい中心、スケール、移動の値を見つけるのは少し面倒です。最後に、以下のコードを追加しました。これにより、マップをドラッグ アンド ドロップし、スクロールして縮尺パラメーターを変更できます。変更のたびに値が表示されるため、マップを正しい場所に簡単に配置して、コンソール出力から最後のパラメーターを採用することができます。

  svg.call(d3.behavior.zoom()
          .translate(projection.translate())
          .scale(projection.scale())
          .on("zoom", redraw));

  function redraw() {
      if (d3.event) {
        projection
          .translate(d3.event.translate)
          .scale(d3.event.scale);
      }
      map.datum(topojson.object(topology, topology.objects.nyct2010))
        .attr("d", path)
        .attr("class", "boundary");
      console.log("Current scale:" + projection.scale())
      console.log("Current translate:" + projection.translate())
      console.log("Current rotate:" + projection.rotate())
  }
于 2012-12-27T20:23:08.380 に答える