通过d3更新传单上的json

Question

我正在使用leaflet，并在地图上显示json与d3 (vers3)。 基本上我正在学习本教程here。

这是我的代码。第一个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没有得到显示。相反，老人留下。 这是为什么？

Answer 1

因为我没有代码玩。

我的直觉是：

当你第一次调用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") 

希望这能解决您的问题！

阅读更新/输入/退出here