通过 d3 更新传单上的 json

Update json on leaflet through d3

本文关键字：json d3 更新 通过      更新时间：2023-09-26

我正在使用leaflet，并在地图上显示带有d3 (vers3)的json。基本上我在这里遵循本教程。

这是我的代码。第一个callbackHandler描述了一种接收另一种语言发送给JavaScript的信息的方法，基于用户与网站的交互。 pathToFile是一个文件（json）的链接，然后由d3.json(...)加载。

var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("class", "leaflet-zoom-hide");
someMethod("myName", function(pathToFile) {
    console.log(pathToFile);
    d3.json(pathToFile, function(error, collection) {
    console.log(collection);
        if (error) throw error;
            
        // Use Leaflet to implement a D3 geometric transformation.
        function projectPoint(x, y) {
            var point = map.latLngToLayerPoint(new L.LatLng(y, x));
            this.stream.point(point.x, point.y);
        }
    
        var transform = d3.geo.transform({point: projectPoint}),
        path = d3.geo.path().projection(transform);
    
        var feature = g1.selectAll("path")
        .data(collection.features)
        .enter().append("path")
        .attr("stroke-width", 0.5)
        .attr("fill-opacity", 0.7)
        .attr("stroke", "white")
    
        map.on("viewreset", reset);
        reset();
    
        // Reposition the SVG to cover the features.
        function reset() {
            var bounds = path.bounds(collection),
            topLeft = bounds[0],
            bottomRight = bounds[1];
        
            svg1 .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);
        }
        console.log("1");
        });
console.log("2");
});

有趣的是：第一次执行代码时，它工作正常。我的json会按原样显示在地图上。但是，当第一个callbackHandler（someMethod）第二次执行时（通过某些用户与网站交互时），新json不会显示在传单上。

这是我尝试更新地图后包含的console.log的输出：

  // on startup of website, the callbackHandler "someMethod" gets 
 ./some/path/toFile
 Object {crs: Object, type: "FeatureCollection", features: Array[20]}
 2
 1
 // after interaction with the website and execution of the callbackHandler "someMethod"
 ./some/other/path/toFile
 Object {crs: Object, type: "FeatureCollection", features: Array[9]}
 2
 1

但是，不会显示新json。相反，旧的留下来了。为什么？

因为我没有代码可以玩。

我的预感是：

当您第一次调用someMethod文件时，文件就会上传，一切正常。

 var feature = g1.selectAll("path")
        .data(collection.features)
        .enter().append("path")
        .attr("stroke-width", 0.5)
        .attr("fill-opacity", 0.7)
        .attr("stroke", "white")

原因：

第一次运行g1.selectAll("path")。选择为空，您可以根据collection.features中的数据附加路径，这将起作用。

第二次当你这样做时g1.selectAll("path")它将返回你绑定数据的路径，但追加将不起作用。

所以问题是你需要删除旧的collection.features或需要更新它。

为此

选项1

var paths = g1.selectAll("path").data()
paths.exit().remove();//remove old data paths
var feature = paths
        .enter().append("path")
        .attr("stroke-width", 0.5)
        .attr("fill-opacity", 0.7)
        .attr("stroke", "white")

选项 2 删除所有路径

var paths = g1.selectAll("path").data()
g1.selectAll("path").remove();//remove all paths
var feature = paths
        .enter().append("path")
        .attr("stroke-width", 0.5)
        .attr("fill-opacity", 0.7)
        .attr("stroke", "white")

希望这能解决您的问题！

在此处阅读更新/输入/退出

相关文章：