topoJSON на D3: карта не отображается (но работает на www.mapshaper.org)

Question

Я пытаюсь скопировать http://bl.ocks.org/mbostock/4060606 используя карту округов Великобритании.

Я выполнил следующие шаги - в значительной степени то, что предлагается на http://bost.ocks.org/mike/map: 1) Я загрузил шейп-файл из Ordnance Survey и извлек некоторые данные, используя qGIS 2), когда я был готов, я перевел шейп-файл в GeoJSON с помощью ogr2ogr 3) я преобразовал GeoJSON в topoJSON, убедившись, что идентификаторы были сохранены

Я в значительной степени скопировал оригинальный пример для хороплета из 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 --width=960 --height=500 --margin=10 --cartesian -o out.json -- in.shp

Или сначала перепроектируйте шейп-файл, используя ogr2ogr

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