2016-04-06 12 views
0

Ich habe an JavaScript-Bibliothek d3 gearbeitet und ich habe versucht, mit einer Karte zu kommen, die auf den SVG-Tags auf meinem HTML rendern kann. Das ist, was ich habe, so weit:D3 Karte nicht angezeigt, obwohl es auf meinem Webserver

<!DOCTYPE html> 
<html> 
    <head> 
     <title>D3 Map</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <script src="js/vendor/jquery.min.js"></script> 
     <script src="js/d3.min.js"></script> 
     <script src="http://d3js.org/topojson.v1.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script> 
    </head> 
    <body> 
     <svg width="1000" height="1300"> 

     </svg> 
     <script> 
var width = 960, 
    height = 500; 

var projection = d3.geo.mercator() 
    .center([0, 5 ]) 
    .scale(900) 
    .rotate([-180,0]); 

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

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

var g = svg.append("g"); 

// load and display the World 
d3.json("kenya.geojson", function(error, data) { 
    g.selectAll("path") 
     .data(topojson.object(topology, topology.objects.countries) 
      .geometries) 
    .enter() 
     .append("path") 
     .attr("d", path) 
}); 

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

erhalte ich nur eine leere Seite mit meinem Web-inspectir mir eine Uncaught Reference sagen: Topologie ist nicht definiert Jetzt ist hier, wo ich etwas Klärungsbedarf: Am I Verwenden Sie die richtige Datei (JSON-Datei), die mir die Zeichnungen für ein bestimmtes Land geben wird? Oder was fehlt mir bisher in meinem Code? Auch in Bezug auf die Ausnahme, was könnte die Ausnahme gefangen werden angesichts der Tatsache, dass ich von einem Python-HTTP-Server arbeite? Jede Rückmeldung ist willkommen

Antwort

1

Wie der Fehler sagte, ist die Variable topology nicht in Ihrem Code definiert. In Ihrem d3.json Anruf sollte datatopology sein. Nehmen Sie diese Änderung vor und versuchen Sie es erneut (wie folgt):

`d3.json("geojson", function(error, topology) { 
    g.selectAll("path") 
    .data(topojson.object(topology, topology.objects.countries) 
     .geometries) 
    ... 
    });