简单的 D3 国家地图

Question

here from maptimelex 精彩的 D3 系列地图给我带来了灵感。我正在尝试复制它，但使用的是海地国家地图而不是肯塔基州地图。

请看我的 JSFiddle here。

我正在使用带有海地简单边框的 JSON 文件。它不包括任何行政边界（部门、公社等）。地图似乎没有正确呈现，我不确定是什么问题。

我收到错误提示 JSON 文件未正确加载或呈现。一个错误是："XMLHttpRequest cannot load: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." 另一个错误是："Uncaught TypeError: Cannot read property 'coordinates' of 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

错误是说您无法加载 https://gist.github.com/29a1f4a91c1c8d615595.git 因为它来自不同的来源并且不支持 CORS。您可以尝试在本地下载 JSON 文件并将您的脚本指向该文件而不是远程位置。

Answer 2

除了@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。

简单的 D3 国家地图

Simple D3 Map of Country

javascript

gis

json

dictionary

d3.js