Простая D3 Карта страны

Question

Я был вдохновлен замечательной серией отображаемых карт D3 here от maptimelex. Я пытаюсь воспроизвести его, но с использованием карты страны Гаити, а не штата Кентукки.

См. Мой JSFiddle here.

Я использую файл JSON с простыми границами Гаити. Он не включает никаких административных границ (отделов, коммун и т. Д.). Кажется, что карта не отображается должным образом, и я не уверен, в чем проблема.

Я получаю ошибки, предполагающие, что файл JSON не загружается и не отображается должным образом. Одна ошибка говорит: «XMLHttpRequest не может загружаться: запросы на кросс-начало поддерживаются только для схем протокола: http, data, chrome, chrome-extension, https, chrome-extension-resource.» Другая ошибка говорит: «Uncaught TypeError: Невозможно прочитать свойства« null ».

Вот мой код JavaScript:

// set height and width of viz  
var width = window.innerWidth, 
    height = window.innerHeight; 

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

// define JSON map data 
d3.json("https://gist.github.com/29a1f4a91c1c8d615595.git", function (json) { 

    // create a first guess for the projection 
    var center = d3.geo.centroid(json); 
    var scale = 150; 
    var offset = [width/2, height/2]; 

    var projection = d3.geo.mercator() 
     .center(center) 
     .rotate([85.8, 0]) 
     .scale(scale) 
     .translate(offset); 

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

    svg.append("g") 
     .selectAll("path") 
     .data(json.coordinates) 
     .enter() 
     .append("path") 
     .attr("d", geoPath); 
}); 

Answer 1

В дополнение к ответу @ noveyak ваш JSON содержит GeometryCollection и поэтому имеет свойство .geometries не .coordinates. Кроме того, ваш масштаб слишком мал, и поворот не нужен.

Сведя вместе:

// create a first guess for the projection 
var center = d3.geo.centroid(json); 

var scale = 8000; 
var offset = [width/2, height/2]; 

var projection = d3.geo.mercator() 
    .center(center) 
    .scale(scale) 
    .translate(offset); 

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

svg.append("g") 
    .selectAll("path") 
    .data(json.geometries) //<-- geometries 
    .enter() 
    .append("path") 
    .attr("d", geoPath); 

Обновлено example.

Answer 2

ошибка говорит, что вы наклоняете нагрузку https://gist.github.com/29a1f4a91c1c8d615595.git becuase она исходит от другого происхождения и не поддерживает CORS. Вы можете попробовать загрузить файл JSON локально и указать ваш скрипт на этот файл вместо удаленного места.