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

Question

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

我已经使核心代码正常工作，并且设置CSS的方式与Bostock示例中的完全相同。我已初始化地图并添加了基本地图。

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数据无法正确缩放，在这里的任何帮助将不胜感激。

我正在尝试遵循Mike Bostock的指示，使D3数据显示在传单上：https://bost.ocks.org/mike/leaflet/。我已经正确实现了代码，并获得了d3 geoJson数据...

Answer 1

晚聚会，但为完整性和后代添加：