2016-04-06 20 views
0

d3 JavaScript kütüphanesi üzerinde çalışıyordum ve html'mdeki svg etiketlerinde işlenebilecek bir harita bulmaya çalışıyordum. Bu defa ne var:D3 Harita, Web sunucumda görünmesine rağmen gösterilmiyor

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

Ben sadece bir Yakalanmayan ReferenceError bana anlatmaya inspectir benim web ile boş bir sayfa olsun: topoloji Şimdi burada tanımlı olduğu değil Biraz açıklamaya ihtiyacım burada: Am I Bana belirli bir ülke için çizimler verecek doğru veri dosyasını (json veri dosyası) kullanarak? Yoksa kodumdan şu ana kadar eksik olan şey nedir? Ayrıca istisna ile ilgili olarak, bir Python HTTP sunucusundan çalıştığım göz önüne alındığında istisna ne olabilir? Herhangi bir geri bildirim açığız

cevap

1

Hata dediği gibi, kodunuzda topology değişkeni tanımlanmadı. D3.json görüşmenizde, data, topology olmalıdır. Bu değişikliği yapın ve tekrar deneyin (aşağıdaki gibi):

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