Svgパスがコンソールに表示されますが、画面に表示されないのはなぜですか？

Question

誰かが私に手を貸すことができるのだろうかと思っていました。

私が変換した以下のtopoJSONからシンガポールの地図をレンダリングしようとしています。私は、コンソール上で生成されたパスを参照しながら

<style> 
    path { 
     /*fill: #ccc;*/ 
     stroke: rgba(12, 12, 12, 0.96); 
     stroke-linejoin: round; 
    } 
</style> 
    <svg width="900" height="600"></svg> 

<script src="https://d3js.org/d3.v4.min.js"></script> 
<script src="https://d3js.org/topojson.v2.min.js"></script> 
<script> 
    var svg = d3.select("svg"), 
     width = +svg.attr("width"), 
     height = +svg.attr("height"); 

//  var projection = d3.geoAlbers(); 
    var projection = d3.geoMercator() 
     .center([0, 5 ]) 
     .scale(900) 
     .rotate([-180,0]); 

    var path = d3.geoPath(projection); 

    d3.queue() 
     .defer(d3.json, "data/sgtopo.json") 
     .await(ready); 

    function ready(error, sg){ 
     if(error) throw error; 
     var topofeature = topojson.feature(sg, sg.objects["sg-"]); 
     svg.append("g") 
     .selectAll("path") 
     .data(topofeature.features) 
     .enter() 
     .append("path") 
     .attr("d", path); 


    } 
</script> 
</html> 

：

以下は私のコードでページが空白のまま。 ご協力いただきありがとうございます。

Answer 1

他の回答のコメントに記載されているように、描画は画面外で行われます。これは、d3.jsマップのトラブルシューティングでよく発生する問題です。エラーはスローされませんが、目に見えるデータは表示されません。これが当てはまる場合、通常、間違った投影パラメータを選択したことが問題です。私は世界のJSONのためにあなたのtopojsonに置き換えた場合

は、これが私の結果である：

それは北に180度、東/西と5度を中心とする

。これはインドネシアの東に位置する太平洋に集中しています。しかし、シンガポールは東方約104度、北緯約1度です。したがって、投影パラメータは次のようになります。

 var projection = d3.geoMercator() 
    .center([103.833333, 1.283333 ]) 
    .scale(900) 

実際には、拡大をさらに拡大するために、実際の縮尺がはるかに大きくなる可能性があります。 900のスケールと上記指定された中心で、私はこのような何かを得る：（上からとコード）

 var projection = d3.geoMercator() 
    .center([103.833333, 1.283333 ]) 
    .scale(60000) 

し、あなたのデータを使用して、私のようなものを得た：

また、メルカトル図法では、マップが正しく配置されるように回転を使用する必要はありませんどこに中心を置いても（円錐形の投影とは異なり）フィーチャーの中心にある座標にセンタリングするだけで十分です。

Answer 2

あなたはそれがデフォルトでは白ですので、あなたのパスにstrokeを追加する必要があります。

svg.append("g") 
    .selectAll("path") 
    .data(topofeature.features) 
    .enter() 
    .append("path") 
    .attr("d", path) 
    .attr("stroke", "black"); <-- Add this