TopoJSON карта не отображается правильно, используя D3

Question

Я скачал this map of Great Britain and Ireland из Highcharts и конвертированы из GeoJSON в TopoJSON формате(), но это только делает как черный ящик. Я famous 'Let's make a map' tutorial следующего:

var container = d3.select("#container"); 

var margin = 20, 
    width = parseInt(container.style("width")), 
    height = parseInt(container.style("height")); 

var projection = d3.geo.mercator() 
    .scale(50); 

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

var svg = container.append("svg") 
    .attr("width", width) 
    .attr("height", height); 

d3.json("http://www.lenart.pl/assets/codepen/gb_all_ireland_topo.json", function(error, gb) { 
    svg.append("path") 
     .datum(topojson.feature(gb, gb.objects.gb_all_ireland_geo)) 
     .attr("d", path); 

}); 

http://codepen.io/znak/pen/rVYbNB

Я просмотры моего TopoJSON файла с http://jsoneditoronline.org и нашел соответствующий объект, содержащий геометрические формы (я думаю), но это не работает.

Моя конечная цель - визуализировать интерактивную (административную) карту GB & I. Спасибо.

Answer 1

Я считаю, что первым местом беспокойства является загрузка с Highcharts - похоже, что это проекция, которая не является wgs84. Таким образом, данные координаты не являются широтами и долготами. Если вы посмотрите на начало highcharts.com/mapdata/custom/gb-all-ireland.geo.json, вы увидите несколько ключей «crs» и ссылку на «EPSG: 7405».

Вы можете конвертировать в WGS84 несколько способов, в том числе:

ogr2ogr -f geojson eire_4326.geojson gb-all-ireland.geo.json -t_srs epsg:4326 -s_srs epsg:7405 

Вы могли бы затем преобразовать в topojson и забрать, где вы остановились.

Также важно понимать, что небольшие изменения в масштабах и значениях центра d3-проекций могут иметь большие последствия.

Если вы не привязаны к Highcharts, вероятно, лучше получить данные, которые уже находятся в wgs84, например http://www.naturalearthdata.com/ или даже использовать более полную библиотеку и данные, такие как mapense https://developer.mapsense.co/tileViewer/. (Раскрытие: я работаю в mapense.)