私の目的は、d3 を使用して、特定の GeoJSON 機能コレクション内の各機能の svg パスを生成することです。
リーフレットを使用してパスをマッピングすると、すべての機能が完璧に見えます。
d3.json("ct_counties.geo.json", function(data) {
var leaflet_paths = leaflet_map.addLayer(new L.GeoJSON(data));
});
しかし、d3 を使用してパスをマッピングすると、一部の機能が正しく見えません。
d3.json("ct_counties.geo.json", function(collection) {
var bounds = d3.geo.bounds(collection);
var path = d3.geo.path().projection(project);
var feature = g.selectAll("path")
.data(collection.features)
.enter().append("path")
.attr('class','county');
d3_map.on("viewreset", reset);
reset();
function project(x) {
var point = d3_map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
return [point.x, point.y];
}
function reset() {
var bottomLeft = project(bounds[0]);
var topRight = project(bounds[1]);
svg.attr("width", topRight[0] - bottomLeft[0])
.attr("height", bottomLeft[1] - topRight[1])
.style("margin-left", bottomLeft[0] + "px")
.style("margin-top", topRight[1] + "px");
g.attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
feature.attr("d", path);
}
});
ここでマップの違いを表示します。
ここで完全なコードを参照してください。
両方のマップが同じフィーチャ コレクションを使用しているのに、d3 バージョンが間違っているのはなぜですか?