d3.js地圖不顯示

-1

我一直在嘗試使用d3.js創建一個基本地圖，其中包含我下載的一個世界shapefile（ne_50m_admin_0_countries）。我一直試圖用各種不同的代碼嘗試並顯示它，但我總是以空白的HTML頁面結束。我是d3.js的新手，而且非常業餘。這是我一直在努力去工作的代碼，它是從http://bl.ocks.org/mbostock/4180634 d3.js地圖不顯示

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

body { 
    background: #fcfcfa; 
} 

    .stroke { 
     fill: none; 
    stroke: #000; 
    stroke-width: 3px; 
} 

.fill { 
    fill: #fff; 
} 

.graticule { 
    fill: none; 
    stroke: #777; 
    stroke-width: .5px; 
    stroke-opacity: .5; 
} 

.land { 
    fill: #222; 
} 

.boundary { 
    fill: none; 
    stroke: #fff; 
    stroke-width: .5px; 
} 

</style> 
<body> 
<script src="//d3js.org/d3.v3.min.js"></script> 
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script> 
<script src="//d3js.org/topojson.v1.min.js"></script> 
<script> 

var width = 960, 
height = 580; 

var color = d3.scale.category10(); 

var projection = d3.geo.kavrayskiy7() 
    .scale(170) 
    .translate([width/2, height/2]) 
    .precision(.1); 

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

var graticule = d3.geo.graticule(); 

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

svg.append("defs").append("path") 
    .datum({type: "Sphere"}) 
    .attr("id", "sphere") 
    .attr("d", path); 

svg.append("use") 
    .attr("class", "stroke") 
    .attr("xlink:href", "#sphere"); 

svg.append("use") 
    .attr("class", "fill") 
    .attr("xlink:href", "#sphere"); 

svg.append("path") 
    .datum(graticule) 
    .attr("class", "graticule") 
    .attr("d", path); 

d3.json("world-110.json", function(error, name) { 
    if (error) throw error; 

    var countries = topojson.feature(name, world.objects.countries).features, 
     neighbors = topojson.neighbors(world.objects.countries.geometries); 

    svg.selectAll(".country") 
     .data(name) 
    .enter().insert("path", ".graticule") 
     .attr("class", "country") 
     .attr("d", path) 
     .style("fill", function(d, i) { return color(d.color = d3.max(neighbors[i], function(n) { return countries[n].color; }) + 1 | 0); }); 

    svg.insert("path", ".graticule") 
     .datum(topojson.mesh(name, world.objects.countries, function(a, b) { return a !== b; })) 
     .attr("class", "boundary") 
     .attr("d", path); 
}); 

d3.select(self.frameElement).style("height", height + "px"); 

</script> 
</body> 
</html>

好像我的JSON是不是任何人的工作，但我正確地保存它通過QGIS。這是它的摘錄：

{"type":"Topology","transform":{"scale":[0.03600360036003601,0.017366249624962495],"translate":[-180,-90]},"objects":{"land":{"type":"MultiPolygon","arcs":[[[0]],[[1]],[[2]],[[3]],[[4]],[[5]],[[6]],[[

任何指導，以我可能做錯了將不勝感激。

來源

2016-11-11 Sandra W

嘗試再次從原始網站複製代碼。

在您的文章中的代碼不同，從一個幾行上http://bl.ocks.org/mbostock/4180634

例如您使用的參數name代替world但仍試圖訪問一個world變量，它必須是不確定的：

// YOUR CODE: 
d3.json("world-110.json", function(error, name) { 
    if (error) throw error; 

    var countries = topojson.feature(name, world.objects.countries).features, // world is UNDEFINED here 
     neighbors = topojson.neighbors(world.objects.countries.geometries); 
----------------------------------------------------- 
// ORIGINAL: 
d3.json("./world-50m.json", function(error, world) { 
    if (error) throw error; 

    var countries = topojson.feature(world, world.objects.countries).features, 
     neighbors = topojson.neighbors(world.objects.countries.geometries);

我只是複製從網站的代碼，並從http://bl.ocks.org/mbostock/raw/4090846/world-50m.json將根據JSON和它運作良好，並顯示那些國家。

來源

2016-11-11 15:19:41 gus27

我試過了，但它仍然不適合我！太令人沮喪了。這是我的系統可能有問題嗎？或者我如何下載json？ –

JavaScript控制檯是否顯示任何消息？ – gus27

你是否試圖驗證你的JSON？例如。這裏：http://jsonlint.com/ – gus27

d3.js地圖不顯示

回答

相關問題