d3.jsのtopoJsonグラフにパスが表示されない
-
22-12-2019 - |
質問
topoJson を使用して地図を描画しようとしているので、この例に従いました
しかし、何も描かれていません。
これが私が書いたことです
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
path {
fill: #ccc;
stroke: #fff;
stroke-width: .5px;
}
path:hover {
fill: red;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 500;
var path = d3.geo.path();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("tunisia.json", function(error, topology) {
console.log(topology);
svg.selectAll("path")
.data(topojson.feature(topology, topology.objects.governorates).features)
.enter().append("path")
.attr("d", path);
});
</script>
</body>
</html>
いくつかのデバッグの後、私の場合のパスは次のように追加されていることがわかりました。
<svg width="960" height="500">
<path></path>
<path></path>
</svg>
通常は次のようになります。
<svg width="960" height="500">
<path d="M183.85631949544694,17.16574961388676L184.64695256075555,18.261986556132797L184.24437929962187,21.436416964644536L184.9109502450185,22.72190753660925L183.42733139583214,23.600229178621248L181.43637647772152,23.38526266060535L162.4858998398068,18.04698631290296L162.95134674943927,16.322885588815097L161.24381018256219,15.20848145955324L160.04585728433227,11.701769628478132L161.0879861841512,10.793553936506555L172.9773901748378,14.256236175137701Z"></path>
</svg>
私が使用しているデータは次のとおりです。https://raw.githubusercontent.com/mtimet/tnacmaps/master/topojson/tunisia.json
私が間違っていることを確認していただけますか
解決
json ファイルには問題ありません。
あなたが抱えている問題は、 d3.geo.path()
つまり、デフォルトに戻ります。上記のリンク先のドキュメントによると、次のようになります。
#d3.geo.path()
デフォルト設定で新しい地理パス ジェネレーターを作成します。の アルバースアメリカ 投影とポイント半径 4.5 ピクセル。
地理データはチュニジアの地図用であるため、albersUsa 投影にはデータセット内の座標は含まれません。そのため、出力ではパス データが空になります。
これを修正するには、投影を定義する必要があります。データをロードするときにこれを行うことができ、次を使用できます。 d3.geo.bounds()
, 、あなたのものを渡します featureCollection
データの地理的境界を見つけるため。
var featureCollection = topojson.feature(topology, topology.objects.governorates);
var bounds = d3.geo.bounds(featureCollection);
次に、これらの境界から、featureCollection の中心を計算できます。
var centerX = d3.sum(bounds, function(d) {return d[0];}) / 2,
centerY = d3.sum(bounds, function(d) {return d[1];}) / 2;
次に、これを使用して投影を中心に置くことができます。たとえば、メルカトル図法を使用している場合は、次のようにすることができます。
var projection = d3.geo.mercator()
.scale(3000)
.center([centerX, centerY]);
スケール 3000 の選択は任意ですが、この場合はうまく機能するように思えただけで、自分に合ったものに調整してください。
最後に、設定する必要があります .projection()
あなたの path
実際に SVG パスを作成する前に、作成した投影に追加します。
path.projection(projection);
svg.selectAll("path")
.data(featureCollection.features)
.enter().append("path")
.attr("d", path);
ここ は、データを使用した実際の例です。