Question

我正在尝试制作一个与此示例（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; });
*/

});

Answer 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");

我仍在研究为什么这会产生错误，但是将这个条件添加到网格函数过滤器似乎可以解决问题。

Answer 2

我发现这个问题解决了这个问题，但它仍然没有解释为什么它首先失败。

以下是修正：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的例子相同（除了数据）。

使用topojson和d3js在澳大利亚地图上显示城市

2 个答案: