使用 D3 渲染的 GeoJson 元素在传单地图上无法正确缩放

Question

我正在尝试按照Mike Bostock的说明进行操作，获取D3数据以显示在传单上：https://bost.ocks.org/mike/leaflet/。我已经正确实现了代码并将路易斯安那州海岸线的 d3 geoJson 数据获取到传单地图上，但是当地图缩放时，geojson 图层无法正确缩放(我想使用 d3 与传单加载数据，因为我希望能够对数据进行动画处理，这在 d3 中更容易(

我已经让核心代码正常工作，并像 Bostock 示例中一样设置 CSS。我已经启动了地图并添加了底图。

var map;
map = L.map('map', {center: [29.50655, -90.29388], zoom: 9});
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
maxZoom: 13,
}).addTo(map);
var CartoDB_PositronOnlyLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}{r}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);

var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("class", "leaflet-zoom-hide");
d3.json("../shoreline-changes/data/LAshorelinesGEOJSON.geojson", function(json) {

var transform = d3.geoTransform({point: projectPoint}),
path = d3.geoPath().projection(transform);

var feature = g.selectAll("path")
.data(json.features)
.enter().append("path");
map.on("viewreset", reset);
reset();
// Reposition the SVG to cover the features.
function reset() {
bounds = path.bounds(json);
var topLeft = bounds[0],
bottomRight = bounds[1];
svg .attr("width", bottomRight[0] - topLeft[0])
.attr("height", bottomRight[1] - topLeft[1])
.style("left", topLeft[0] + "px")
.style("top", topLeft[1] + "px");
g   .attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
feature.attr("d", path)
.style("fill", "none")
.style("stroke-width", "1")
.attr("stroke", function(json)
{if (json.properties.year == "1853")
{return "blue"}
else if(json.properties.year == "1855")
{return "yellow"}
else if(json.properties.year == "1869")
{return "red"}
else if(json.properties.year == "1877")
{return "green"}
else if(json.properties.year == "1883")
{return "black"}
else if(json.properties.year == "1884")
{return "grey"}
else if(json.properties.year == "1887")
{return "orange"}
else if(json.properties.year == "1922")
{return "teal"}
else if(json.properties.year == "1932")
{return "#0bfdff"}
else if(json.properties.year == "1973")
{return "#ff06f9"}
else if(json.properties.year == "1978")
{return "#ffc106"}
else if(json.properties.year == "1996")
{return "#4a4d57"}
else if(json.properties.year == "2001")
{return "#014020"}
});
console.log(json);
}
// Use Leaflet to implement a D3 geometric transformation.
function projectPoint(x, y) {
// Returns the map layer point that corresponds to the given geographical coordinates
var point = map.latLngToLayerPoint(new L.LatLng(y, x));
this.stream.point(point.x, point.y);
}

});

CSS 是：

#map {
width: 960px;
height: 500px;
}
svg {
position: relative;
}

可以在此处看到一个工作示例：https://experiments.lmmapping.com/projects/shoreline-changes/index.html 或代码笔(尽管显示在控制台中，但它不显示 geojson 数据(：https://codepen.io/datatpolymer/full/GRKGjgp。

正如您在缩放时看到的那样，geojson 数据无法正确缩放，此处的任何帮助将不胜感激。

Answer 1

晚了，但为了完整和后代而添加：

正如其他人所发现的那样，将传单的触发事件从"viewreset"更改为"zoomend"是有效的。我遇到了类似的问题，这使我来到这里，并查看了这两个事件的传单文档。

似乎也许当视图重置被触发时，Leaflet 还没有正确的信息来提供给 D3，因此 D3 在对 Leaflet 的基础地图进行所有更改之前缩放 SVG，因此 SVG 会使用旧的或不完整的信息进行更新。

视图重置：

当地图需要重绘其内容时触发(这通常发生在地图缩放或加载时(。对于创建自定义叠加非常有用。

缩放结束：

在地图更改时触发，在任何动画之后。

https://leafletjs.com/reference-1.6.0.html#map-viewreset

这也有可能是自 7 年前发布 Bostock 的 D3 + 传单 (D3 V3( 教程以来 API 更改的结果。仅在 D3 位中就需要进行相当多的调整才能遵循 V4 和 V5 的教程。