1
D3を使用してサンフランシスコのGeoJSONマップを表示しようとしています。私が使用して提供しています、次のファイルを持っている "HTTPサーバ-c-1"：D3はGeoJSONパスをSVGに追加しますが、何も表示されません。
のindex.html：
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script src="./d3Map.js"></script>
</body>
</html>
d3Map.js：
const d3 = window.d3;
// Append a svg to the HTML body and set its height and width:
const svg = d3.select('body')
.append('svg')
.attr('height', 500)
.attr('width', 500)
// Append the <g> element which is used for grouping SVGs:
const g = svg.append('g');
// Get the GeoJSON data and use it to setup the paths:
d3.json('./sfmaps/neighborhoods.json', (error, topology) => {
// Setup the projection:
const bounds = d3.geoBounds(topology);
const centerX = d3.sum(bounds, (d) => d[0])/2;
const centerY = d3.sum(bounds, (d) => d[1])/2;
const projection = d3.geoMercator()
.center([centerX, centerY]);
// Create a geographic path generator and set its projection:
const path = d3.geoPath()
.projection(d3.geoMercator());
g.selectAll('path')
.data(topology.features)
.enter()
.append('path')
.attr('d', path);
});
私は点検表示されたSVGは空白ですが、表示されるSVGは空白です。
<body>
<svg>
<g>
<path d="..."></path>
<path d="..."></path>
...
</g>
</svg>
</body
ただし、表示されるSVGは空白です。
プロジェクションが正しくスケールされていないと思われたので、.center（...）を省略し、サンフランシスコの緯度と経度でハードコーディングし、.fitSize（...）を使用しました。
私はドキュメントの用語で少し混乱しています。値がGeoJSONオブジェクトでなければならないということは、JSON全体（コード内で「トポロジ」と名付けたもの）、フィーチャ（トポロジ・フィーチャ）、または個々のパス（トポロジ.features [0]）。しかし、私は3つすべてを使用しようとしましたが、いずれもコンソールでエラーを表示したり表示したりしませんでした。
GeoJSONファイルは他の人が作ったファイルなので、正しいことは間違いありません。
私は何が間違っているのか、これをデバッグするためにどのような道が必要なのか、ご意見はありますか？