Question

我从here显示的maptimelex精彩系列D3地图中获得灵感。我试图复制它，但使用的是海地国家的地图，而不是肯塔基州。

请参阅我的JSFiddle here。

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

我收到错误，表明JSON文件未正确加载或呈现。一个错误说：“XMLHttpRequest无法加载：只有协议方案支持交叉源请求：http，数据，chrome，chrome-extension，https，chrome-extension-resource。”另一个错误说：“未捕获的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

错误是说您无法加载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。

国家

2 个答案: