0

オーストラリアとニュージーランドに焦点を当てていることを除いて、この例 ( http://bost.ocks.org/mike/map/ )とまったく同じマップを作成しようとしています。指示に従いましたが、場所のドットがマップに表示されません。

これは私が自分のデータを生成する方法です:

ogr2ogr -f GeoJSON -where "adm0_a3 IN ('AUS', 'NZL')" subunits.json ne_10m_admin_0_map_subunits.shp

ogr2ogr -f GeoJSON -where "(iso_a2 = 'AU' OR iso_a2 = 'NZ') AND SCALERANK < 8" places.json ne_10m_populated_places.shp

topojson --id-property su_a3 -p name=NAME -p name -o aus.json subunits.json places.json

これまでに取得したコードは次のとおりです。http://bashsolutions.com.au/australia.html

マップは表示されますが、都市のドットは表示されません。私は何を間違っていますか？

編集:したがって、これは大きな長いエラーだけではあまり明確ではないため、実際のコードは次のとおりです:

<script>

var width = 960,
    height = 1160;


//var subunits = topojson.object(aus, aus.objects.subunitsAUS);

var projection = d3.geo.mercator()
  //.center([0,0])
  .center([180,-40])
  .scale(400)
  //.translate([width / 2, height / 2])
  .precision(.1);

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

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

d3.json("aus.json", function(error, aus) {
  svg.selectAll(".subunit")
    .data(topojson.object(aus, aus.objects.subunits).geometries)
    .enter().append("path")
    .attr("class", function(d) { return "subunit " + d.id; })
    .attr("d", path);

  svg.append("path")
    .datum(topojson.mesh(aus, aus.objects.subunits, function(a,b) { return a !== b; }))
    .attr("d", path)
    .attr("class", "subunit-boundary");

  svg.append("path")
    .datum(topojson.mesh(aus, aus.objects.subunits, function(a,b) { return a == b; }))
    .attr("d", path)
    .attr("class", "subunit-boundary External");

/* This is the failing bit */
  svg.append("path")
      .datum(topojson.object(aus, aus.objects.places))
      .attr("class", "place")
      .attr("d", path);
/* End of failing bit */

/*
  svg.selectAll(".place-label")
      .data(topojson.object(aus, aus.objects.places).geometries)
    .enter().append("text")
      .attr("class", "place-label")
      .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; })
      .attr("x", function(d) { return d.coordinates[0] > -1 ? 6 : -6; })
      .attr("dy", ".35em")
      .style("text-anchor", function(d) { return d.coordinates[0] > -1 ? "start" : "end"; })
      .text(function(d) { return d.properties.name; });
*/

});
4

2 に答える 2

1

アウトラインをプロットするときは、TKL (トケラウ) データ ポイントを削除する必要があります。

   svg.append("path")
      .datum(topojson.mesh(aus, aus.objects.subunits, function(a, b) {
           return a === b && a.id !=="TKL" }))
      .attr("d", path)
      .attr("class", "subunit-boundary External");

これによりエラーが発生する理由はまだ調査中ですが、その条件をメッシュ関数フィルターに追加すると問題が解決するようです。

于 2013-03-28T09:12:41.590 に答える
0

問題を解決するこの問題を回避しましたが、そもそもなぜ失敗したのかはまだ説明されていません。

これが修正です： http://bashsolutions.com.au/australia2.html

このコードのチャンクは、上記の失敗したビットを置き換えます。

svg.selectAll(".place")
  .data(topojson.object(aus, aus.objects.places).geometries)
.enter().append("circle")
  .attr("d", path)
  .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; })
  .attr("r", 2)
  .attr("class", "place");

したがって、これはラベル ビット (上でコメントアウトされています) に似た処理を行うことで回避できますが、テキストの代わりに円を描画します。

しかし、(データは別として) Mike Bostock の例と同じであることを考えると、上記のビットのどこが間違っていたのかはまだわかりません。

于 2013-03-28T08:27:52.037 に答える