topoJSON on D3: map没有显示(但它在www.mapshaper.org上工作)

Question

我试着用英国的县地图复制http://bl.ocks.org/mbostock/4060606。

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

我在很大程度上抄袭了mbostock的合唱团的原始例子。然而，我得到的不是一张好地图，而是一张.圆圈。我想知道我是不是在用投影做一些错误？

为了完整起见，这是页面的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