d3.js Map wird nicht angezeigt

-1

Ich habe versucht, eine grundlegende Karte mit d3.js mit einer Welt Shapefile zu erstellen, die ich heruntergeladen habe (ne_50m_admin_0_countries). Ich habe stundenlang mit allerlei verschiedenen Codes versucht, um es anzuzeigen, aber ich habe immer eine leere HTML-Seite. Ich bin neu bei d3.js und bin ziemlich amateur. Hier ist der Code, den ich versucht haben, um zu arbeiten, ist es von http://bl.ocks.org/mbostock/4180634 d3.js Map wird nicht angezeigt

<!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>

Es scheint, wie meine JSON ist nicht für jeden von ihnen zu arbeiten, aber ich sparte sie richtig durch QGIS. Hier ist ein Auszug davon:

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

Jede Anleitung, was ich falsch machen könnte würde sehr geschätzt werden.

Quelle

2016-11-11 Sandra W

Versuchen Sie, den Code erneut von der ursprünglichen Website zu kopieren.

Der Code in Ihrem Beitrag in mehreren Zeilen von dem

auf http://bl.ocks.org/mbostock/4180634

unterscheidet Z.B. Sie werden mit dem Parameter name statt world aber versuchen immer noch eine world Variable zuzugreifen, die nicht definiert werden müssen:

// 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);

ich nur den Code von der Website kopiert und den nach json von http://bl.ocks.org/mbostock/raw/4090846/world-50m.json und es funktioniert gut und zeigt, die Länder.

Quelle

2016-11-11 15:19:41 gus27

Ich habe das versucht, aber es zeigt immer noch nicht für mich! So frustrierend. Ist es etwas, das mit meinem System falsch ist ... oder wie ich den JSON heruntergeladen habe? –

Werden in der JavaScript-Konsole Nachrichten angezeigt? – gus27

Haben Sie versucht, Ihren JSON zu validieren? Z.B. hier: http://jsonlint.com/ – gus27

d3.js Map wird nicht angezeigt

Antwort

Verwandte Themen