Моя цель - использовать d3 для генерации путей svg для каждой функции в данной коллекции объектов GeoJSON.Географические несоответствия GeoJSON между d3 и листом
Когда я рисую дорожки с помощью листовки, все функции выглядят идеально.
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);
}
});
Посмотреть отличительные отличия here.
И обратитесь к полному коду here.
Поскольку обе карты используют одну и ту же коллекцию функций, почему версия d3 неверна?
Похоже, многоугольники интерпретируются по-разному. Из-за порядка очков. При ближайшем рассмотрении, похоже, что один пункт отсутствует в каждом полигоне. Вероятно, бит, где конец приклеивается к началу? – flup