2016-08-19 9 views
1

詳細:

以下の設定があります。生成されたカスタムtopjsonファイルは、単純に私のWebページに表示したい。私はコンソールで見ることができますが、作成され、データが正しく読み込まれますが、何らかの理由でd3がパス要素をレンダリングせず、何も表示されません。D3のGeoJSON:パスはデータにバインドされていません

Javascriptを

var width = 960; 
    var height = 500; 


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


    var projection = d3.geo.albersUsa() 
     .scale(1000) 
     .translate([width/2, height/2]); 


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

     d3.json('http://localhost.com/calgary.json', function(error, calgary) { 
     svg.append('path') 
     .datum(topojson.feature(calgary)) 
     .attr('d', path) 
     .attr('fill','red'); 
     }); 

カスタムTopojsonファイル:

http://pastebin.com/ere2Ww7K

依存関係にある:
まず:

<script src="http://d3js.org/d3.v3.min.js"></script> 
    <script src="http://d3js.org/topojson.v1.min.js"></script> 
    <script> 
+0

コンソールに何かエラーがありますか? – elias

答えて

1

私にとって、あなたのコード内の2つのエラーがあるようです、関数内あなたのtopojsonファイルが壊れているようだ、

.datum(topojson.feature(calgary, calgary.objects.CALGIS_ATS_SECTIONS))

第二:JSON負荷で呼ばれ、データム内部topojsonコールは、2つのパラメータ、対象物である第2の1を必要とします。この最初の修正の後、何かが私に現れますが、それはちょうど大きな四角形を埋めるポリゴンの束です。

有効なtopojsonファイル(つまりhttp://bl.ocks.org/mbostock/raw/4090846/us.json)を使用して、以前の呼び出しで「CALGIS_ATS_SECTIONS」を「land」に置き換えてみました。これは本当にスムーズに動作します。

関連する問題