D3 上的 topoJSON：地图不显示（但它适用于 www.mapshaper.org）

Question

我正在尝试使用英国县地图复制 http://bl.ocks.org/mbostock/4060606。

我遵循了以下步骤 - 几乎是 http://bost.ocks.org/mike/map 上的建议： 1）我从军械测量局下载了shapefile并使用qGIS提取了一些数据 2) 准备好后，我使用 ogr2ogr 将 shapefile 转换为 GeoJSON 3) 我将 GeoJSON 转换为 topoJSON，确保保留了 ID

我几乎从 mbostock 复制了 choropleth 的原始示例。然而，我得到的不是一张漂亮的地图，而是一个……圆圈。我想知道我的投影是否有一些错误？

为了完整起见，这是页面的 javascript 部分：

var width = 960,
    height = 600;

var rateById = d3.map();

var quantize = d3.scale.quantize()
    .domain([0, .15])
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

var projection = d3.geo.albers()
          .center([0, 55.4])
          .rotate([4.4, 0])
          .parallels([50, 60])
          .scale(50)
          .translate([width / 2, height / 2]);

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


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

queue()
    .defer(d3.json, "uk.topo.json")
    .defer(d3.tsv, "unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
    .await(ready);

function ready(error, uk) {
    svg.append("g")
     .attr("class", "counties")
     .selectAll("path")
     .data(topojson.feature(uk, uk.objects.counties).features)
     .enter().append("path")
//     .attr("class", function(d) { return quantize(rateById.get(d.id)); })
     .attr("class", "q5-9" )
     .attr("d", path);

//  svg.append("path")
//     .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
//      .attr("class", "states")
//     .attr("d", path);
}

d3.select(self.frameElement).style("height", height + "px");

各县的topoJSON太大，这里贴不上来，大致是这样的：

{"type":"Topology","objects":{"counties":{"type":"GeometryCollection","bbox":[220956.7,35190.3,655967.1,586683],"geometries":[{"type":"Polygon","properties":{"name":"Buckinghamshire"},"id":11901,"arcs":[[-1,-2,-3,-4,-5,-6]]},{"type":"Polygon","properties":{"name":"Cambridgeshire"},"id":1386,"arcs":[[-7,-8,-9,-10,-11,-12,-13,-14]]},{"type":"Polygon","properties":{"name":"Cumbria"},"id":13244,"arcs":[[-15,-16,-17]]},{"type":"Polygon","properties":{"name":"Derbs"},"id":13688,"arcs":[[-18,-19,-20,-21],[-22]]},...},"arcs":[[[5876,2688],[-67,53],[-21,101],[7,65],[96,66],[-7,66],[-78,69],[-234,12],[-5,42],...},"transform":{"scale":[43.5053905390539,55.15478547854785],"translate":[220956.7,35190.3]}}

我在这里不是一个很好的专家，所以我可能会做一些根本错误的事情。不过，我有一个确定：

• 英国县地图是正确的，因为它在http://www.mapshaper.org/ 上显示正确

有什么想法吗？如果需要，我很乐意粘贴完整的文件。

谢谢！

Answer 1

坐标似乎已经投影（即笛卡尔坐标）。

在这种情况下你应该使用

d3.geo.path().projection(null);

但请确保首先将您的 topojson 缩放到所需的大小

topojson --width=960 --height=500 --margin=10 --cartesian -o out.json -- in.shp

或者首先使用ogr2ogr重新投影shapefile

ogr2ogr -t_srs EPSG:4326 out.shp in.shp