2016-04-06 1 views
0

私はd3 JavaScriptライブラリに取り組んでいました。私はhtmlのsvgタグでレンダリングできるマップを用意しようとしていました。これは私がこれまで持っているものです。D3地図がウェブサーバにあるにもかかわらず表示されない

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

私だけキャッチされないにReferenceErrorの私に言っinspectir私のウェブと空白のページを取得する:トポロジーはここに今が定義されていない、私はいくつかの明確化が必要な場所さ: アイ・アム特定の国の図面を私に与える正しいデータファイル(jsonデータファイル)を使用していますか?これまで私のコードから抜けているのは何ですか? また、例外に関して、私がPython HTTPサーバーから作業していることを考えれば、例外がキャッチされる可能性はありますか?すべてのフィードバックは歓迎です

答えて

1

エラーが言ったように、変数topologyはあなたのコードで定義されていません。あなたのd3.jsonコールでdatatopologyになるはずです。変更を加えてもう一度試してください(次のように):

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